[SingleSelect] Input label overflows the value

[mackankowski]

Hi @iulian-radu-at,

Please see the example of the issue with using SingleSelect component with isCreatable flag.

1. Typing new option and confirm:
2. Making focus out from this input field:

It doesn't happen when fields are reset initially (and filled by data). I use Controller from react-hook-form. I'll try to provide a sample code later.

Best regards, Maciej

[keemor]

Hi @iulian-radu-at,

Here is reproduced defect:

https://codesandbox.io/s/react-hook-form-controller-react-select-material-ui-c90eq?file=/src/index.js

1. Go to Creatable Select material-ui
2. Type 'Other' - press enter
3. Blur the field

which looks like this

I found a workaround for this issue, but I'm not sure if it's the right way to go: https://codesandbox.io/s/react-hook-form-react-select-material-ui-integration-zubob?file=/src/index.js

Notice that red cross is also available after you type some value:

Thank you for your support

[iulianraduat]

Hi @keemor,

Based on your example we have the following usages of SingleSelect:

The broken one (example 1):

  const { handleSubmit, reset, register, setValue, control } = useForm();

            <Controller
              name="CreatableReactSelectMUI"
              label="Creatable Select material-ui"
              options={options}
              SelectProps={{
                isClearable: true,
                isSearchable: true,
                isCreatable: true
              }}
              as={Log}
              control={control}
            />

and the working one (example 2):

            <SingleSelect
              name="singleSelect"
              label="SingleSelect"
              options={options}
              SelectProps={{
                isCreatable: true,
                isClearable: true,
                isSearchable: true
              }}
              onChange={value => {
                setValue("singleSelect", value);
              }}
            />

The setValue in onChange from example 2 is useless as value is not used by the SingleSelect :)

In Example 1, SingleSelect will receive a prop "value" having the new value in it. But the options do not contain a corresponding option for it, hence the bug. This is not happening for example 2 as there value remains undefined.

I implemented a fix in v6.6.3 so please test it and let me know if it works for you.

Cheers, Iulian

[keemor]

Hi @iulian-radu-at,

Your fix solved the problem, so this code now works.

<Controller
  as={SingleSelect}
  options={options}
  label="Creatable Select material-ui"
  name="CreatableReactSelectMUI"
  SelectProps={{
    isClearable: true,
    isSearchable: true,
    isCreatable: true
  }}
  control={control}
/>

Thank you for your support 😃

[mackankowski]

Thank you for your collaboration. All issues have been solved.