Options disappear after select one in Multi

[RicardoHds]

I have a the following AsyncPaginate in two different component and requests (Multi Select).

1. The first one works very well, when I select one option the rest of the options keeps on the select. This request have +100 records.
2. The sencond one component is exacly the same the only difference is the number of records and page. For this request I have only 11 records and 2 pages, but in the first time I can see all options and select one but after this the rest of the option disappear and the component return "No results".

Also I tried different ways to fix it, configured 4 pages and 2 options each or 3 pages with 3 options.
I don't undestand what is the problem of it is the same implementation the difference is only the total records to show.

Any suggestion?

<AsyncPaginate isMulti isSearchable value={value} loadOptions={loadOptions} onChange={onChange} additional={{ page: 1 }} />

[vietd7]

you shoud add props getOptionValue like this
getOptionValue={(option) => option.id}

[ImGelu]

I'm having the same problem. @vtaits any updates on this? (I'm also using getOptionValue and getOptionLabel)

[vtaits]

Hello. Can you make a sandbox example?

[ayuka-bg]

example with SWAPI
https://codesandbox.io/s/react-hook-form-example-forked-m6w4gd

but with correct getOptionValue works well, without - infinity loading -> no options -> loading

[ianchanning]

@ayuka-bg That's a great example - but I didn't spot what you meant at first. Could you maybe create a separate multi-select dropdown without the getOptionValue to show how it fails?

[ianchanning]

Actually I forked it show what I mean:

[ianchanning]

Note that weirdly I hit this problem when switching from the Apollo GraphQL client to the urql GraphQL client. I haven't been able to figure out why because the options structure in loadOptions for both of them is the same