How to fix / clear react-select while using formik?

user_3556252 0
Viewed 399

I am in the process of learning React - I am having an issue where the values when running conditional returns appear to still be visible on screen.

Example: Go to the Room Button, select a room and a user then go to the User Button or Location Button and the values still appear to be visible/selected - although they are not.

I had seen a similar post to this, however could not seem to get it working. I have tried resetForm() setFieldValue

I have created a codesandbox with what I am using below. There may be a better way to do this also...

https://codesandbox.io/s/floral-leftpad-vhfi0

I would appreciate any feedback/hints or tips what or where I am going wrong!

Thanks,

react-select formik reactjs javascript
1 Answers

Value for your select should be null if you want to reset it. In your case it could be undefined, because you find the value and if nothing found - it would be undefined here.

value={
          props.options
            ? props.options.find((option) => option.value === field.value)
            : null || ""
        }

You could code like this to make value as null:

  let value = null;

  if (props.options) {
    value =
      props.options.find((option) => option.value === field.value) || null;
  }

  return (
    <div style={{ width: props.width }}>
      <Select
        {...field}
        {...props}
        name={field.name}
        isSearchable="true"
        isClearable="true"
        value={value}
        onChange={(option) => {
          if (option) {
            setFieldValue(field.name, option.value);
          } else {
            setFieldValue(field.name, 0);
          }
        }}
        onBlur={field.onBlur}
      />
    </div>
  );

Check it out: https://codesandbox.io/s/infallible-fire-68m1m?file=/src/CustomSelect.js

user_57230950
Related