reactjs - MUI 和 Formik : Validation doesn't trigger for useField

Question

带有最少工作示例的代码沙盒:https://codesandbox.io/s/mystifying-lake-m0oxc?file=/src/DemoForm.tsx
本质上，我有一个 AutoComplete 下拉菜单，它通过 useField 钩子(Hook)绑定(bind)到 Formik 表单中。这会在任何更改时正确设置值，但验证似乎不会在我期望的时候触发。
如果出现以下情况，验证将成功运行并消除错误:

另一个字段被更改

我在下拉菜单中选择一个值后单击“背景”

我预期并希望的是，在选择一个值时，验证应该立即运行。
重现:

单击类别下拉菜单

选择一个值，关闭下拉菜单

确认错误仍然显示(在字段和打印输出中)

单击屏幕上的其他地方。这应该会触发验证并清除错误。

有什么建议？
编辑:
我已经用 react-select 作为下拉列表测试了一个等效的实现，并且遇到了同样的问题，所以我认为它与 MUI 没有直接关系。

Answer 1

我只是根据您提供的工作示例进行了复制，并意识到您设置了 helpers.setTouched手动。
只是不要过度使用 setTouched如果您从自动完成中删除所选项目，您还需要处理。

      <Autocomplete
        disablePortal
        id="category-selector"
        options={options}
        onBlur={() => helpers.setTouched(true, true)}
        isOptionEqualToValue={(option, value) => option.id === value.id}
        onOpen={() => helpers.setTouched(true, true)}
        onChange={(_, option) => {
          if (option) {
            helpers.setValue(option.id);
          } else {
            helpers.setValue(0);
          }
        }}
        renderInput={(params) => (
          <TextField
            {...params}
            label="Category"
            error={meta.touched && Boolean(meta.error)}
          />
        )}
      />