Buggy and confusing documentation. How to use the Select component with URL source, infinite scrolling, search and initial value load?

[andreinitescu]

I've been trying with no luck to setup the Select component to make all of the following work together:

1. ✅ Show items in the dropdown with pagination. This works OK, the component calls the URL with the limit and skip query parameters.
2. ✅ Filter results in the dropdown based on the user entering a search string. This works OK, the component calls the URL with the value of searchField as the query parameter name and the user's search string as the query parameter value.
3. 🔴 When the form with the Select component is loaded, it should call the URL to get the selected option in the submission. This does not work correctly. The component calls the URL with the value of searchField as query parameter. But since the item id (an integer) is saved in the submission ("valueProperty" : "id"), the URL is called with id=100. My API will try to look search for an item with the name containing "100", it won't return the item with id = 100!

Can I achieve all the three items above with the Select component? Or it's not currently designed for what I want to do?

Thank you in advance for any input.

[andreinitescu]

One of the issues is, after dropdown is closed, the Select component clears all the loaded options in the dropdown, and loads the first 'limit' items. But if the selected item is not within the first 'limit' items, the select component behaves in a weird way, the selected value "id" is displayed!

[pocketcap]

I found the same issue: if the selected item is not available in the new set of options, only "id" is displayed. This happens when when searchField is used.

Any help would be appreciated.

[lane-formio]

To assist in reproducing, can you provide a sample form json and/or jsfiddle (or similar code sandbox) example?