[Autocomplete] support pagination on Asynchronous requests

See original GitHub issue

Would be very nice to add any ability for support pagination on Asynchronous requests Many resources have limitations on requests and we can not get all results at once Also reading everything page by page can lead to exceed limit of requests and it will be too slow

We would likely need to extend the API:

diff --git a/packages/material-ui/src/Autocomplete/Autocomplete.d.ts b/packages/material-ui/src/Autocomplete/Autocomplete.d.ts
index a2929c4867..39fa7130b3 100644
--- a/packages/material-ui/src/Autocomplete/Autocomplete.d.ts
+++ b/packages/material-ui/src/Autocomplete/Autocomplete.d.ts
@@ -143,6 +143,11 @@ export interface AutocompleteProps<
    * @default false
    */
   loading?: boolean;
+  /**
+   * If `true`, the `loadingMoreText` message is displayed at the bottom of the displayed options.
+   * @default false
+   */
+   loadingMore?: boolean;
   /**
    * Text to display when in a loading state.
    *
@@ -150,6 +155,13 @@ export interface AutocompleteProps<
    * @default 'Loading…'
    */
   loadingText?: React.ReactNode;
+  /**
+   * Text to display when in a loading more state.
+   *
+   * For localization purposes, you can use the provided [translations](/guides/localization/).
+   * @default 'Loading more…'
+   */
+  loadingMoreText?: React.ReactNode;
   /**
    * The maximum number of tags that will be visible when not focused.
    * Set `-1` to disable the limit.

Benchmark

Issue Analytics

State:
Created 4 years ago
Reactions:71
Comments:31 (13 by maintainers)

Top GitHub Comments

59reactions

oliviertassinaricommented, Apr 11, 2021

So, if you provide a custom ListboxComponent component or you can detect the scroll-bottom with:

<Autocomplete
  ListboxProps={{
    onScroll: (event: React.SyntheticEvent) => {
      const listboxNode = event.currentTarget;
      if (listboxNode.scrollTop + listboxNode.clientHeight === listboxNode.scrollHeight) {
        loadMoreResults()
      }
    }
  }}
/>

21reactions

oliviertassinaricommented, Nov 19, 2019

@vadimka123 I’m not sure to understand the use case. From my perspective, pagination should not be necessary. Either you request the data incrementally and add them to the list of options, then once the list is fully loaded, you enable the search. Or you really have too much data and you opt for an instant search like call API, for each keystroke. What do you think?