Select Async
This section covers the async functionality of the Select component. To enable async mode, set the useAsync prop to true and provide a fetchFunction that handles data fetching. The component can also manage query parameters state of the request for you .
When using async mode, make sure to pass the isLoading prop to the component. This ensures that appropriate UI components and actions are disabled while fetching the data. The Select component itself does not handle the loading state.
Paginating data in an async enviorment via the recordsPerPage prop on the front-end is only avialable if the data cannot be filtered by the fetch function. If you enable fetching on input change or on page change the pagination needs to be handled on the backend in order for the Select to use infinite scroll.
The API used for these examples is the Dummy JSON API from DumyJSON.
Lazy Init
If you dont want the fetch function to run on the initial page load but rather the first time the dropdown gets expanded you can set the lazyInit prop as true to accomplish this.
- Please select a value
Fetch On Input Change
If you wish to enable fetching on input change please pass the fetchOnInputChange prop as true. The triggering of the fetch function after the input update is debounced with a default duration of 500. You can tweak the duration of the debounce via the inputUpdateDebounceDuration prop. You will recieve the search query value in the params object that gets passed as the first argument of the fetchFunction.
- Please select a value
Fetch On Scroll
If you whish to enable infinite scrolling for the async functionality you can pass the fetchOnScroll prop as true. The page number will be accessible in the first parameter of the fetch function along with the search query value.
- Please select a value