vtaits / react-select-async-paginate

Wrapper above react-select that supports pagination on menu scroll
MIT License
308 stars 75 forks source link

AsyncPaginate isMulti with a single value output is undefined #146

Closed shortdark closed 1 year ago

shortdark commented 1 year ago

Question

AsyncPaginate isMulti with a single value output is undefined

The current behavior?

When I add isMulti to a react-select it works perfectly for 2 or more items selected. If only one item is selected the field returns undefined when submitted.

What is the expected behavior?

I want the react-select to return the data if one thing is selected, or multiple.

Sample Code

import { AsyncPaginate } from 'react-select-async-paginate';
import { useForm, Controller } from 'react-hook-form';

...

              <Controller
                name='multipleField'
                control={control}
                {...register('multipleField', {})}
                render={({ field }, ref) => (
                  <>
                    <label htmlFor='multipleField'>Multiple</label>
                    <AsyncPaginate
                      closeMenuOnSelect={false}
                      {...field}
                      ref={ref}
                      isClearable
                      isMulti
                      placeholder={'Multiple placeholder'}
                      className={`react-select ${
                        errors['multipleField'] ? 'error' : ''
                      }`}
                      loadOptions={(search, prevOptions) =>
                        loadOptions(search, prevOptions, multiOptions)
                      }
                    />
                  </>
                )}
              />

What's your environment?

"react-select": "4.3.1", "react-select-async-paginate": "0.5.3",

Other information

I'm sorry I have not submitted a sandbox. It feels like when I added isMulti there is something basic I have missed out, or maybe isMulti is the wrong thing to use.

Thanks very much.

vtaits commented 1 year ago

Hello. I've created an example with integration with react-hook-form

https://codesandbox.io/s/x7vw8c

Maybe it would be helpful