重置通知状态时，材料 UI 自动完成组件不会清除输入

Question

I'm using Material UI version 4 (the latest), and the Informed form library . I have a custom component (custom to integrate with Informed) that wraps the Material UI TextField which I'm rendering using the Autocomplete component.

App component

    <Form getApi={(api) => setFormApi(api)}>
      {formApi && (
        <>
          <label>
            First name:
            <Autocomplete
              freeSolo
              options={autoOptions}
              renderInput={(params) => (
                <CustomTextField field="name" {...params} />
              )}
            />
          </label>
          <button type="submit">Submit</button>
          <button type="button" onClick={() => formApi.reset()}>
            Reset
          </button>
          <FormState />
        </>
      )}
    </Form>

The issue

When the reset button is clicked you can see the Informed "form state" is cleared, but the input still has a value. Any ideas on how to solve this?

Example - Codesandbox

Answer 1

The inputProps are getting overriden by the ones provided by Autocomplete component, change the order you pass ...rest props and included the ...rest.inputProps in your custom inputProps with the correct value

      <TextField
        {...rest} // should go first to allow overriding
        // only add value props for select fields
        // value={value}
        onChange={(event) => {
          setValue(event.target.value);
          if (onChange) {
            onChange(event);
          }
        }}
        onBlur={(event) => {
          setTouched(true);
          if (onBlur) {
            onBlur(event);
          }
        }}
        error={!!error}
        helperText={error ? error : helperText ? helperText : false}
        variant="outlined"
        margin="none"
        fullWidth
        inputProps={{
          ...rest.inputProps, // must include otherwise it breaks
          value:
            !select && !maskedValue && maskedValue !== 0 ? "" : maskedValue,
          maxLength: maxLength || undefined
        }}
        // eslint-disable-next-line
        InputProps={{
          style: sensitive && {
            color: "rgba(0,0,0,0)",
            caretColor: "#000"
          },
          startAdornment
        }}
        InputLabelProps={{
          shrink: true
        }}
        autoComplete="off"
        disabled={disabled}
      />