如何自定义 Material-UI 自动完成的清除行为？

Question

我有一个受控的 Autocomplete 组件绑定到来自 redux 的 state 道具，一切正常。当用户单击 "clear" 图标时会触发 onChange 事件，但是当发生这种情况时输入会聚焦并且下拉列表会打开。

如何防止输入焦点/下拉菜单仅在清除所选选项时打开？我的首选行为是 return 选择 "null" 并显示未缩小的标签。

代码大致如下所示。 value 来自 mapStateToProps，onChange 来自 mapDispatchToProps。

const LetterSelect: FC<Props> = ({ value, onChange }: Props) => {
    return (
        <Autocomplete
            options={["A", "B", "C", "D"]}
            value={value ?? null}
            onChange={(e,v) => onChange(v)}
            renderInput={params => (
                <TextField {...params} label="Letter" variant="outlined" fullWidth />
            )}
        />
    )
}

Answer 1

抱歉，我没有早点回到这个问题：实际上没有直接解决这个问题。

相反，我在 Github 上提出了一个问题，同意更改默认行为 - 请参阅 this PR。

从 v4.8.1 开始，单击清除图标不再打开自动完成功能

如何自定义 Material-UI 自动完成的清除行为？

How to customize clear behaviour of Material-UI Autocomplete?

autocomplete

reactjs

material-ui

react-redux