Reset controlled component

[dan-cooke]

I'm having difficulties resetting my material-ui components.

With a vanilla HTML form element, its simple.

But with my custom material-ui component, it seems nearly impossible.

export const ValidatedSelect: React.FC<ValidatedSelectProps> = ({
  name,
  children,
  ...selectProps
}) => {
  const { error, getInputProps, validate, defaultValue } = useField(name);

  const [value, setValue] = useState<any>();

  useEffect(() => {
    validate();
  }, [value]);

  const inputProps = getInputProps(selectProps);

  return (
    <Select
      {...inputProps}
      onChange={(e) => {
        setValue(e.target.value);
        inputProps?.onChange?.(e);
      }}
      error={!!error}
      helperText={error}
      autoComplete={name}
    >
      {children}
    </Select>
  );
};

Calling reset() from the form context does nothing in this case, and same for all my other material ui components.

Any ideas how I can hack around this, I definetly won't be using Material on my next project after this issue.

[airjp73]

You'll want to use useControlField for that.

[dan-cooke]

Duh. Thank you! I saw it in the docs earlier but I must have glanced over it