React-select: Can I add a button "Show More" inside the result list?

[paulocesarpcfj]

I want a button Show More, or maybe a forever loading when the Async returns value, that will be necessary to call the next pages of the API.

How can I do this using the react-select?

[FDMatthias]

This would also be useful for when we have a couple hundred of options to show. For example we could then show a "next 50 options"-button.

[paulocesarpcfj]

Yes, thats what i need. Maybe a loadMore prop on the component, that when is set to true we can define some method to show on the result list. Anyone could help us with this?

[paulocesarpcfj]

Any new on this?

[matthughes]

This would require an API change wouldn't it? loadOptions returns Promise<Array<Object>>. In order to implement a feature like this you'd have to know how many possible options are there. We'd need to change loadOptions to return something like: Promise<Object> where that object looks something like:

{
  resultCount: 1000
  results: [...] // Array of 200 
}

[matthughes]

I don't even need a "next 50 options" button. I just want some way to indicate to the user that I'm showing them partial results. I'm perfectly ok with them having to type a more specific search to narrow down the results but the UX of Async has some issues in this area.

Similarly, if you don't specify defaultOptions, Async just shows "No options" in the drop-down. But that's not true; the user just hasn't triggered loadOptionsFn yet. I worked around this by changing that text to something like "Search for options"

[gregholst]

You can also turn off the 'no options' message using this top level prop:

noOptionsMessage={() => null}

[ebonow]

Greetings,

One possible way to address this is to use a MenuList and pass in other components.

const MenuList = (props) => {
  const {
    MenuListHeader = null,
    MenuListFooter = null
  } = props.selectProps.components;

  return (
    <components.MenuList {...props}>
      {MenuListHeader}
      {props.children}
      {MenuListFooter}
    </components.MenuList>
  );
};

const MenuListFooter = <center>Showing partial results</center>;

const App = (props) => (
  <Select components={{ MenuList, MenuListFooter }} options={options} />
);

And to do something a bit more complex like adding more options when clicking a "show more" button, here is a codesandbox I put together to demonstrate how something like this could be done.

That said, this issue is exactly 3 years old and with a focus on closing out as many stale and depreciated issues as possible, we will be closing this out. Please feel free to reply if this does not resolve the use-case or better yet, open a new discussion where we can better address your questions as a community.