marmelab
AutocompleteArrayInput doesn't allow more than 25 elements
What you were expecting:
ReferenceArrayInput/AutocompleteArrayInput allow the usage of an unlimited amount of elements.
What happened instead: When trying to add a new element (26th element and upwards), as soon as the GET request for the fetching of filtered options starts, my input flickers weirdly, shows as if I had confirmed the option and then disappears again.
There seems to be a limit of 25 elements only when typing in and searching. When you click on the AutocompleteArrayInput (to get a list of the current options) and click on one of the options manually, adding seems to work fine.
Please note that after the first input of "Algeria", I did not press enter or anything to prompt; as soon as the GET request got going with my input (after the threshold of 250ms) the flickering starts, the option I intended to use shows as if I had clicked or pressed enter, and then disappears.
Steps to reproduce:
- Have a ReferenceArrayInput with AutocompleteArrayInput
- Fill your AutocompleteArrayInput with 25 elements
- Try to add more by typing in (NOT by clicking into the AutocompleteArrayInput and then clicking one of the options)
Related code: Sadly, I was not able to reproduce the bug in the codesandbox, out of two reasons:
- The
AutocompleteArrayInputin the example codesandbox (v4) doesn't allow typing inside the input, as theCreateTagcomponent in theTagReferenceInput.tsxseems to have a bug (probably Line 88;value={value}while thevalueisn't a string, but an object) - The fake backend (ra-data-fakerest) somehow doesn't allow filtering using fuzzy search, I wasn't able to find out why.
Other information: Setting the perPage prop on ReferenceArrayInput did not help. For now, I am using the SelectArrayInput as workaround.
Environment
- React-admin version: 4.2.4
- React version: 18.2.0
- Browser: Chrome Version 103.0.5060.114
~~Reproduced!~~
Thank for the report.
I might have spoken too fast, here is a codesandbox in which I am unable to reproduce this behaviour. Can you see it there?
@septentrion-730n Hi! I couldn't reproduce the bug with your approach, but as I mentioned above, I think it's related to the GET requests being made when the user has changed (or started) his input, so you would need to add a ReferenceArrayInput component as well. I slightly adjusted your example with a fork, still unable to reproduce the bug, although the AutocompleteArrayInput kind of behaves weirdly.
I think the bug might not be reproducible because the ra-data-fakerest provider does not issue any HTTP requests, as the README states. I'm using ra-data-simple-rest to connect the app to the API.
