RJSF表单使用自定义Widget时按键滚动至顶部并失焦问题

我需要自定义Widget，根据不同的linkType属性值渲染不同的输入类型（select、textarea）。尝试将表单状态存储在本地以传递给Widget，但输入框按键时表单会滚动至顶部且输入框失焦（推测是整个表单重渲染导致），即便只有linkAction值发生变化。

表单组件代码 #

export const PageEditModalForm: FC<PageEditModalFormProps> = ({ onUpdate, onError, onCancel }) => {
const { currentFormData, currentSchema } = usePageContext();
const [formData, setFormData] = useState(currentFormData);

const customWidgets = useMemo(() => ({
    LinkTypeWidget
}), []);

const uiSchema: UiSchema = useMemo(() => ({
    'ui:submitButtonOptions': {
        norender: true
    },
    "ui:title": "",
    "links": {
        "items": {
            "linkAction": {
                "ui:widget": "LinkTypeWidget",
            },
            // "linkType": {
            //     "ui:widget": "LinkTypeOptionsWidget",
            // }
        }
    },
    "html": {
        "ui:widget": "textarea"
    },
}), []);

return (
    <ModalBox className="bb-edit-page-modal">
        {currentSchema &&
            <>
                {/*title is disabled in schema so can style it here */}
                <h2>{currentSchema.title}</h2>
                <Form
                    id={currentSchema.title}
                    schema={{ ...currentSchema }}
                    onChange={(e) => setFormData(e.formData)}
                    formData={{ ...formData }}
                    validator={validatorAjv8}
                    onError={onError}
                    widgets={customWidgets}
                    onSubmit={onUpdate}
                    uiSchema={uiSchema}
                >
                    <Grid container spacing={1} className="bb-flex bb-fixed">
                        <Grid item>
                            <Button onClick={onCancel} variant="text">
                                Cancel
                            </Button>
                        </Grid>
                        <Grid item className="bb-ml-auto">
                            <Button variant="contained" type="submit">
                                Update
                            </Button>
                        </Grid>
                    </Grid>
                </Form>
            </>
        }
    </ModalBox>
);
};

自定义Widget代码 #

import React, { useCallback } from 'react';
import { TextField } from '@mui/material';

const LinkTypeWidget = (props: any) => {
console.log("props", props);
console.log("formContext", props.registry.formContext);

const handleChange = useCallback((event: any) => {
    const newValue = event.target.value;
    props.onChange(newValue);
}, [props]);

return (
    <TextField
        id={props.id}
        label="Outlined"
        variant="outlined"
        value={props.value}
        onChange={handleChange}
    />
);
};
export { LinkTypeWidget };

内容的提问来源于stack exchange，提问作者Hawkzey