Formik: Formik with @material-ui/core Select is warning?

[Adherentman]

got this warning when i use @material-ui select component.

This is my code

function CustomSelect ({...props}: any) {
  // tslint:disable-next-line:max-line-length
  const { classes, formControlProps, LabelProps, labelText, id, selectProps, handleChange, handleBlur, values, children } = props;
  return (
    <FormControl
      {...formControlProps}
    >
    {labelText !== undefined ? (
      <InputLabel
        htmlFor={id}
        {...LabelProps}
      >
        {labelText}
      </InputLabel>
    ) : null }
      <Select
        // onBlur={handleBlur(id)}
        // onChange={handleChange(id)}
        {...selectProps}
      >
        {children}
      </Select>
    </FormControl>
  );
}

<Field
   name="category"
   render={({ field }: FieldProps<FormValues>) => (
   <CustomSelect
       labelText="Select"
       htmlFor="test"
       formControlProps={{
       fullWidth: true
     }}
       selectProps={{
       autoWidth: true,
       ...field,
       input: <Input id="test" name="category"/>
       // inputProps: {
       //   id: 'test',
       //   name: 'category'
       // }
   }}
   >
      <MenuItem value=""><em>None</em></MenuItem>
      <MenuItem value={10}>Ten</MenuItem>
      <MenuItem value={20}>Twenty</MenuItem>
      <MenuItem value={30}>Thirty</MenuItem>
     </CustomSelect>
   )}
/>

[IgorJoergensen]

Yeah - also problems with
https://github.com/JedWatson/react-select

[ArvinH]

Is this still a problem that doesn't have workaround yet?

[metr1ckzu]

@ArvinH

<Select
   value={roleId}
   onBlur={event => {
      event.target.name = 'roleId';
      handleBlur(event);
   }}
/>

But for me it's a little bit sloppy. Formik returns error with a significant delay, don't know it's my code or some internal issue with Select itself.

Update:
Apparently when you blur from open select at first Select closes list, on second blur it blurs out from input itself triggering formik's handleBlur

[Filson14]

@metr1ckzu - I tried Your workaround and it doesn't seem to make a difference.
And You're right. First occurs list blur (what brings focus to select itself) and the the input "is blured".

Update: Usage of Select's 'native' prop makes it work quite ok (I've got some layout issues but it's probably about some adjustments/configuration).

[stale[bot]]

Hola! So here's the deal, between open source and my day job and life and what not, I have a lot to manage, so I use a GitHub bot to automate a few things here and there. This particular GitHub bot is going to mark this as stale because it has not had recent activity for a while. It will be closed if no further activity occurs in a few days. Do not take this personally--seriously--this is a completely automated action. If this is a mistake, just make a comment, DM me, send a carrier pidgeon, or a smoke signal.

[tonnenpinguin]

Seems like this issue still persists. We are using a slightly more generic version of @metr1ckzu 's workaround:

const handleBlurWorkaround = value => event => {
  event.target.name = value;
  return event;
};

The onBlur prop of the Select component is then passed this little gem here:

onBlur={R.compose(
    handleBlur,
    handleBlurWorkaround(field.name),
)}

[prichodko]

Whenever library doesn't call handlers with native events, you should use setField*** to achieve the same functionality, e.g.:

onChange={value => setFieldValue(field.name, value)}
onBlur={() => setFieldTouched(field.name)

[tonnenpinguin]

Thanks @prichodko! This actually fixed the issue for me.

[Natansab]

Whenever library doesn't call handlers with native events, you should use setField*** to achieve the same functionality, e.g.:

onChange={value => setFieldValue(field.name, value)}
onBlur={() => setFieldTouched(field.name)

Thanks for the advice, for anyone who is still struggling, it will most probably work using:
onChange={(e, { value }) => setFieldValue(field.name, value)}

[amandakoster]

@Natansab Where/how did you define setFieldValue and setFieldTouched?

[johnrom]

@amandakoster setFieldValue and setFieldTouched come from useFormikContext or the props passed to Formik's child component, but you don't need to use them during normal handleChange / handleBlur usage.

Normal handleChange / handleBlur usage is:

<YourCustomField
  // if your custom field passes an `Event` to callback:
  onChange={formik.handleChange}
  onBlur={formik.handleBlur}
  // if your custom field only passes a value to onChange, and doesn't pass an event to handleBlur:
  onChange={formik.handleChange("fieldName")}
  onBlur={formik.handleBlur("fieldName")}
/>

[amandakoster]

Here was our final fix for this issue in IE:

     onBlur={e => {
            e.target.name = name;
            field.onBlur(e);
          }}