vtaits / react-select-async-paginate Goto Github PK

Hi,

I'm trying to drag the scrollbar to the bottom and expecting that it would load more options like it does when using the mouse wheel. But it doesn't. It doesn't work on mobile as well.

I'm providing a sandbox which is basically the exemple given in this repo.
To reproduce, just drag the scrollbar on the bottom of the select. The next options are not display. You can use the wheel and then it displays those options.

https://codesandbox.io/s/zqlvx5z5q3

What is the current behavior?

When using lodash/debounce npm package for the loadOptions function, the latter behaves unexpectedly and often produces excess repeated calls. Since pagination relies on the length of the previous data set, which is not changed until a loadOptions promise is resolved, such behavior results in duplicate data coming from the API.

What is the expected behavior?

Debouncing happens as expected, resulting in a single loadOptions call after however-numerous triggers (results were scrolled to bottom or input field value was changed), resulting in valid unique data from the API.

Sandbox Link

Example of the bug on CodeSandbox

What's your environment?

• [email protected]
• [email protected]
• [email protected]
• macOS Mojave 10.14.2 (18C54)
• Google Chrome 71.0.3578.98

Other information

Some of the details I explored/thought of:

• the bug occurs only the first time when loadMore is called | False
• the bug occurs when the defaultOptions are set to true | False

Hi Team,

Thanks for a wonderful component first of all, but after using it for a while I came upon this roadblock. The component is great, but I have a hard time using it dynamically. For now I can only trigger the component dropdownlist base on the loadOptions function.

My drop down list is dependent on the selected company code value. The expectation is that when you focus on the dropdownList, loadOptions is invoked which will retrieve the expected list of data from API. The problem is that the component only invokes loadOptions on mount and on scroll. So when the company code changes, if the component has already been mounted, the first list of data from API options list will not changed.

Is there a way to clear the list once I change the company code. To summarize will you guys have a example I can look at with react-select-async-paginate where I can render dynamic dropdownlist. Please Help! thank you so much!

Feature request

First off, great package! I had to tweak the component slightly to get it to be able to pass in additional params, so that I could integrate with our RESTful API, which uses a page parameter, and when I checked again I saw you had started working on the same thing! 😃

What is the current behavior?

Only loads new options when you get to the bottom of the list of options.

What is the desired behavior?

Trigger loadOptions at a configurable value (eg. 70%) from the bottom of the dropdown list.

What's your environment?

• [email protected]
• [email protected]

Other information

What is the current behavior?

Passing a prop of defaultOptions to AsyncPaginate does noting

What is the expected behavior?

The defaultOptions prop on the Async Select Component in react-select allows you to either pass in a list of pre-populated options or if it's set to true it calls the loadOptions function on component mount.

What's your environment?

• [email protected]
• [email protected]

bug report

What is the current behavior?

Using a custom Menu component causes the scroll position to jump to the top when an option is selected.

What is the expected behavior?

Selecting an option should keep the scroll position in place and not scroll to the top.

Sandbox Link

https://codesandbox.io/s/menu-debug-d9nw6

What's your environment?

"react-select": "^3.1.0",
"react-select-async-paginate": "^0.3.14"
Mac OS 10.13.6
Chrome Version 79.0.3945.130 (Official Build) (64-bit)

Are you submitting a bug report or a feature request?

Bug Report

What is the current behavior?

onInputChange is not executed by the default export from the react-select-async-paginate package when the user types into the input

What is the expected behavior?

the function passed to the onInputChange prop should be executed when the user types into the input

Sandbox Link

https://codesandbox.io/s/simple-example-9gxk2?fontsize=14&hidenavigation=1&theme=dark&file=/src/App.jsx

What's your environment?

react: 16.8.6
react-select: 3.0.4
react-select-async-paginate: 0.3.14
os: macOS Mojave
browser: Chrome

Other information

NA

When I pass optionComponent prop to the AsyncPaginate the request is not triggered when scrolled to bottom of menu. As soon as I remove this prop everything works fine.
Is it a bug or I lack some configuration?

Are you submitting a bug report or a feature request?

Feature request

What is the current behavior?

When the user specifies defaultOptions: true the options are loaded automatically. However, when cacheUniq changes, the options are dropped and no new default options are loaded which seems inconsistent.

What is the expected behavior?

With defaultOptions: true options should be loaded whenever cacheUniq changes.

Sandbox Link

https://codesandbox.io/s/simple-example-gki9z

What's your environment?

react-select-async-paginate: 0.35.0
react-select: 3.0.4
react: 16.8.6
However, this should be environment independent.

Are you submitting a bug report or a feature request?
Bug report

What is the current behavior?
When using AsyncPaginateBase to control menuIsOpen it is breaks a custom input component from controlling the input value as it requires the user to supply an onInputChange prop.

What is the expected behavior?
You should be able to control menuIsOpen while retaining the input component's control over the input value.

What's your environment?
"react-select": "2.4.0", "react-select-async-paginate": "0.3.1"

When I scroll to the bottom of the first page of options, the next page is loaded by using the loadOptions callback, however, after the next page of options is added to the select component, it scrolls to the top.

Are you submitting a bug report or a feature request?

Feature Request

What is the current behavior?

Currently if you pass in a SelectComponent prop of Creatable from react-select it doesn't just work out of the box.

What is the expected behavior?

Expected to have a prop titled creatable as a boolean to add additional logic for handling creatable.

Other information

I am not entirely sure on the direct path to take, however I can definitely submit a PR with the right direction/ if this is something you want in this package to support.

Are you submitting a bug report or a feature request?

What is the current behavior?

When customising MenuList max-height and overflow-y are lost, which causes the pagination/lazy loading to continuously load.

This is even when using wrapMenuList.

What is the expected behavior?

Max height and overflow-y should be set, or documentation should be updated highlighting this.

Sandbox Link

https://codesandbox.io/s/simple-example-xwdbr?file=/src/App.jsx

What's your environment?

See sandbox.

The customised MenuList I'm using comes from Material-UI.

Other information

This is easily solved by adding:

style = {{maxHeight: '300px', overflowY: 'auto'}}

which the wrapMenuList function can probably provide.

If you like I can create a PR for this.

Are you submitting a bug report or a feature request?

feature request

What is the current behavior?

options are loaded on menu open if there is not an empty string entry in the options cache. This means it will load options on menu open no matter what if you change the value of cacheUniq which completely clears the options.

What is the expected behavior?

The desired behavior is that I can manually choose whether opening the menu triggers getting more options.

Sandbox Link

See this example https://codesandbox.io/s/little-shape-ks4b1

• Type in the text "opt". Let results load and then hit "Clear Cache".
• Take note of the number of console logs (I'm logging every time the loadOptions method is called).
• Now click the menu again.
  • The logs count goes up
• Click on and off the text box repeatedly
  • The console log count goes up until it has loaded all of the options even though we aren't trying to page.

What's your environment?

react 16.2
react-select-async-paginate 0.3.11
react-select 3.0.8

Additional Notes

Part of the need for this is that I'm hanging onto the input value after the user clicks off. If the value was always reset after clicking outside of the select, you wouldn't have the problem. The feature of persisting the text works (as seen by the demo), but perhaps the way I'm doing it is a little off. That might be the root of the issue, but I still think this option gives the developer more control over the component.

You also probably wouldn't notice this issue if you never used cacheUniq.

Either way, I don't feel like requiring the developer to have an empty string option is clearly defined and that it isn't always feasible.

When I use with redux form

<Field name="gender" component={renderAsyncSelect} />

const renderAsyncSelect = () => <AsyncSelect {...input} {...rest} />

I recognize at event onBlur, value of field with be set to empty. Any idea to fix it

I'm using JSON Server to test this library. I was able to get it to work with AsyncPaginate because their pagination feature uses Http headers https://github.com/typicode/json-server#paginate, rather than the body of a response to indicate that more results are available.

Can Select-Fetch's API be updated to send headers via the mapResponse attribute? It could be another field of the payload object.

What's your environment?

"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-select": "^3.1.0",
"react-select-async-paginate": "^0.4.0",
"react-select-fetch": "^0.2.0",

Are you submitting a bug report or a feature request?

Not sure

What is the current behavior?

When selecting an option it clears inputValue which leads to open the menu with options unfiltered

What is the expected behavior?

Persist inputValue when choosing an option so you dont have to rewrite the search

Sandbox Link

https://codesandbox.io/s/2323yrlo9r

What's your environment?

"react-select": "2.4.1",
"react-select-async-paginate": "^0.2.8",

bug report

What is the current behavior?

https://codesandbox.io/s/o75rno2w65?file=/src/App.jsx
Add menuIsOpen property to AsyncPaginate:

<AsyncPaginate
menuIsOpen
value={value}
loadOptions={loadOptions}
onChange={onChange}
/>

Menu does not open

What is the expected behavior?

Menu should open

Sandbox Link

https://codesandbox.io/s/o75rno2w65?file=/src/App.jsx
Add menuIsOpen property to AsyncPaginate:

<AsyncPaginate
menuIsOpen
value={value}
loadOptions={loadOptions}
onChange={onChange}
/>

What's your environment?

"react": "16.13.1",
"react-dom": "16.13.1",
"react-scripts": "3.4.1",
"react-select": "3.1.0",
"react-select-async-paginate": "0.3.14"

Other information

N/A

When paging a nested result set, the results from the second page are appended to the previous results correctly.

What is the current behavior?

pages = [
  [
    {
      "label": "United States",
      "options": [
        {
          "label": "Alabama",
          "value": "Alabama"
        },
        {
          "label": "Alaska",
          "value": "Alaska"
        },
        {
          "label": "Arizona",
          "value": "Arizona"
        },
        {
          "label": "Arkansas",
          "value": "Arkansas"
        }
      ]
    }
  ],
  [
    {
      "label": "United States",
      "options": [
        {
          "label": "California",
          "value": "California"
        },
        {
          "label": "Colorado",
          "value": "Colorado"
        }
      ]
    }
    {
      "label": "United Kingdom",
      "options":
        {
          "label": "Aberconwy and Colwyn",
          "value": "Aberconwy and Colwyn"
        },
        {
          "label": "Aberdeen City",
          "value": "Aberdeen City"
        }
      ]
    }
  ]
]

When fetching the second page, it results in a dropdown with 3 groups:

United States

• Alabama
• Alaska
• Arizona
• Arkansas

United States

• California
• Colorado

United Kingdom

• California
• Colorado

What is the expected behavior?

Because the options for United States are nested and have the same group label, they should be kept together:

United States

• Alabama
• Alaska
• Arizona
• Arkansas
• California
• Colorado

United Kingdom

• California
• Colorado

I think it would be better if there was a way to move the logic that merges the prevOptions and new options into the custom callback, rather than doing it in the AsyncPaginate component would solve my use case, because I can handle the merging of data myself.

Are you submitting a bug report or a feature request?

Bug?

What is the current behavior?

React throws a warning if you create a function component wrapper around react-select and use this as the value for SelectComponent:

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

One workaround is to wrap the FC in forwardRef (as the warning suggests), but this is annoying if you are not going to use the ref for anything..

What is the expected behavior?

Should not need to wrap the functional component in forwardRef

Sandbox Link

https://codesandbox.io/s/simple-example-o1xfv

Check the console output

What's your environment?

react-select 3.0.4
react-select-async-paginate 0.3.7

Other information

Would an option be to not set the ref unless selectRef is used?

FAQ

Are you submitting a bug report or a feature request or a question?

Question.

What is the current behavior?

When I click on the input field while entering the value I entered is getting cleared. Even on clicking outside the search box, the value is getting cleared.

What is the expected behavior?

The entered input value should not be cleared if clicked on the input box itself as well when clicked outside the select box.

Sandbox Link

https://codesandbox.io/s/o75rno2w65

Other information

If possible can you share the solution with code? Thank you.

I am trying to use material UI select instead of react-select's SelectBase. I currently got this

<AsyncPaginate
            loadOptions={data}
            onChange={event => onChange('selected', event.value)}
            value={selected}
            SelectComponent={(<Select />)}
          />

Which l expect to work as I am passing the Select to it like l will for it to accept it as component. but sadly getting an error along the lines of

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Any idea how to resolve this?

Hello! Thank you for a perfect lib.
I saw that AsyncPaginatesupportsmenuIsOpen` in 0.4.0-alpha.1 version.

I am trying to use alpha version, but it is fail to compile.

Im trying to use the component and options are not loading ever.
In the browser console I have the following warning:

Warning: Failed prop type: AsyncPaginateBase: prop type `SelectComponent` is invalid; it must be a function, usually from the `prop-types` package, but received `undefined`.

My current Code:

class SelectItem extends React.Component {

  DEFAULT_OFFSET = 15;

  handleChange = (selectedOption) => {
    this.props.onChange(selectedOption.value);
  };

  filterOptions = (inputValue, page) => {
    let filtered = this.props.options;
    if(inputValue) {
      filtered = this.props.options.filter(element =>
        element.label.toLowerCase().includes(inputValue.toLowerCase())
      );
    }
    const defaultPaginated = filtered.slice(page * DEFAULT_OFFSET, (page + 1) * DEFAULT_OFFSET);
    return {
      options: defaultPaginated,
      hasMore: (page + 1) * DEFAULT_OFFSET < this.props.options.length
    }
  }

  loadOptions = (inputValue, loadedOptions, { page }) => {
    const  filteredOptions = this.filterOptions(inputValue, page);
    return  {
      options: filteredOptions.options,
      hasMore: filteredOptions.hasMore,
      additional: {
        page: page + 1
      }
    }
  }

  render() {
    return (
      <React.Fragment>
        <div className="Input-Select">
          <label>{this.props.label}</label>
          <div className={this.props.error ? "container invalid" : "container"}>
            <AsyncPaginate
              cacheOptions
              defaultOptions
              loadOptions={this.loadOptions}
              value={this.props.value}
              onChange={this.handleChange}
              additional={{ page: 0 }}
              noOptionsMessage={() => "No se encontraron opciones"}
              loadingMessage={() => "Cargando opciones.."}                
              placeholder="Seleccionar..."
              className="inputField"
              classNamePrefix="select"
            />
          </div>
          <div className={this.props.error ? "error active" : "error"}>
            <span>{this.props.error}</span>
          </div>
        </div>
      </React.Fragment>
    );
  }
};

bug report

What is the current behavior?

This is related to #51
That issue was fixed but here's my exact use case. I'm trying to implement a "Show Selected" feature which will only show selected values in the drop down. I have done this by implementing a custom Options component. Clicking the "Show Selected" button will load all values / pages even though shouldLoadMore is returning false.

What is the expected behavior?

Clicking the "Show Selected" button should not load more values. Something else seems to be invoking the load method when I manipulate the Options component to only show selected values.

Sandbox Link

https://codesandbox.io/s/customization-check-of-the-need-of-load-options-u75uf

What's your environment?

"react-select": "^3.1.0",
"react-select-async-paginate": "^0.3.13"
Mac OS 10.13.6
Chrome Version 79.0.3945.130 (Official Build) (64-bit)

Are you submitting a bug report or a feature request?

Bug report

What is the current behavior?

When you set option padding in styles (as you do for react-select component) then new options load without doing any scroll

What is the expected behavior?

By default new options should load only after scroll menu to bottom even if padding is set

I'm trying to find some workaround with shouldLoadMore now. (not use the default option)

Other information

example of padding:

const selectStyles = {
  option: (base, state) => {
    return {
      ...base,
      padding: "4px 5px 5px"
  }
};

<AsyncPaginate
      styles={selectStyles}
     // other props
/>;

Are you submitting a bug report or a feature request?

feature

What is the current behavior?

react-select-async-paginate depends on react-select v2.

What is the expected behavior?

react-select-async-paginate depends on react-select v3.

Other information

Upgrade guide: JedWatson/react-select#3585

Are you submitting a bug report or a feature request?

bug report

What is the current behavior?

loadOptionsOnMenuOpen is not working as excepted.

What is the expected behavior?

it should not load options on menu open

Sandbox Link

https://codesandbox.io/s/request-by-page-number-jmenc

What's your environment?

react: 16.8.6

Im trying to use a component based on react-virtualized as the MenuList component, however the scrolling doesnt seem to be tracked properly. Scrolling to the bottom of the menu does not trigger new options to load. Is there a callback I need to pass for this to work correctly?

import AsyncPaginate, { wrapMenuList } from 'react-select-async-paginate';
import { CustomVirtualizedList } from '../virtualized-menu-list/index';

const MenuList = wrapMenuList(CustomVirtualizedList);

<AsyncPaginate
  {...otherProps}
  components={{ MenuList }}
/>

Are you submitting a bug report or a feature request?

Bug report

What is the current behavior?

TS error:

ERROR in /node_modules/react-select-async-paginate/index.d.ts(2,46):
TS2307: Cannot find module 'react-select/lib/types'.
ERROR in /node_modules/react-select-async-paginate/index.d.ts(3,38):
TS2307: Cannot find module 'react-select/lib/Select'.

What is the expected behavior?

Correctly imports types

Sandbox Link

What's your environment?

react: 16.9
react-select: 3.0.8
react-select-paginate: 0.3.9

Other information

Seems to be fix if change from:

import { InputActionMeta, OptionsType } from 'react-select/lib/types';
import { Props as SelectProps } from 'react-select/lib/Select';

to:

import { InputActionMeta, OptionsType } from 'react-select/src/types';
import { Props as SelectProps } from 'react-select/base';

I got issue with loadOptions, what I expect is only call it when scroll to bottom.
But when typing on input, it is still called.
Anyway, it seems shouldLoadMore doesn't work in this case.
Could anyone give me a hand to check this?

bug report

What is the current behavior?

When using both debounceTimeout and shouldLoadMore, optionsCache does not get refreshed with options for string values that get typed before the debounceTimeout time.

For example, in the codesandbox search for value "ti". Be sure to type it fast so "t" doesn't timeout. You will see in the optionsCache there are options for "ti" but no options for "t". If you then search for "t" it will not refresh optionsCache and it will return no options. If you remove the use of shouldLoadMore and go through the same example, the options for "t" will get refreshed with the options.

What is the expected behavior?

When searching for "t" again, it should refresh (run loadOptions) the options since it was added to optionsCache before the debounceTimeout.

Sandbox Link

https://codesandbox.io/s/manual-control-of-input-value-and-menu-opening-9k5bp

What's your environment?

"react-select": "^3.1.0",
"react-select-async-paginate": "^0.3.14"
Mac OS 10.13.6
Chrome Version 79.0.3945.130 (Official Build) (64-bit)

Are you submitting a bug report or a feature request?

feature-request

What is the current behavior?

1. Currently, I am not able to clear the options manually
2. Can not get all the options

What is the expected behavior?

My use-case is to clear/remove all options manually and want all the options from the component without ref

Sandbox Link

What's your environment?

Other information

Are you submitting a bug report or a feature request?

@vtaits Thanks for your work. <3

What is the current behavior?

loadOptions does not reload data

What is the expected behavior?

the first time, i set options is [] in state, but when i have new data, i want to update options.

behavior

Click dropdown before 10s, after 10s, it doesnt update options ( look at codesandbox)

Sandbox Link

https://codesandbox.io/s/simple-example-8f65y?fontsize=14&hidenavigation=1&theme=dark

Are you submitting a bug report or a feature request or a question?

Question

Hi,

My use case here is depending upon contentTypeDropdown, I should display the options by search in react-select-async-paginate by making an API call. So whenever I change contentTypeDropdown value the cache should be cleared and make an API call to get records of the selected contentTypeDropdown value.

Thanks.

What is the current behavior?

Unable to clear the cache and unable to make API call after a change in contentTypeDropdown.

What is the expected behavior?

The cache should be cleared and make an API call to display options.

Code

`
import React, { Component } from 'react';
import { Nav, Form } from 'react-bootstrap';
import { AsyncPaginate } from 'react-select-async-paginate';

    class SearchBoxDropDown extends Component {
    constructor(props) {
            super(props);
            this.state = {
            content_type: '3',
            value: {},
            };
    }

    handleContentTypeChange = (e) => {
            this.setState({ content_type: e.target.value });
    }

    handleChange = (value) => {
            this.setState({ value });
    }

    loadOptions = async (search, prevOptions) => {
            const { content_type } = this.state;
            const { contentTypeDropdown, globalSearch } = this.props;

            let filteredOptions = [];
            let hasMore = false;
            // Example of contentTypeDropdown
            // contentTypeDropdown = [{ id: 1, model: 'apple' }, { id: 2, model: 'banana' }, { id: 3, model: 'cherry' },
            //     { id: 4, model: 'pineapple' }, { id: 5, model: 'guava' }, { id: 6, model: 'mango' },
            //     { id: 7, model: 'kiwi' }, { id: 8, model: 'coconut' }];

            if (search) {
            const type = contentTypeDropdown.filter(item => item.id === content_type)[0].model;

            // globalSearch is a function that makes an API call and fetches data.
            // response.next has the value null if there are no records load.

            await globalSearch(type, search, prevOptions.length).then((response) => {
                    filteredOptions = response.results.map(item => ({ value: item.id, label: item.name }));
                    hasMore = response.next !== null;
            });
            }

            return {
            options: filteredOptions,
            hasMore,
            };
    }

    render() {
            const { contentTypeDropdown } = this.props;
            const { content_type, value } = this.state;

            return (
            <>
                    <Nav.Item as="li" style={{ display: 'flex'}}>
                    <Form.Control
                            as="select"
                            name="content_type"
                            className="ff-Arial rounded-0"
                            style={{ backgroundColor: '#50b8e4', color: 'white' }}
                            value={content_type}
                            onChange={this.handleContentTypeChange}
                    >
                            {contentTypeDropdown.map(val => <option style={{ backgroundColor: 'white', color: 'black' }} key={val.id} value={val.id}>{val.model}</option>)}
                    </Form.Control>
                    </Nav.Item>
                    <Nav.Item as="li" style={{ width: '49%', marginTop: '15px' }}>
                    <AsyncPaginate
                            value={value}
                            loadOptions={this.loadOptions}
                            onChange={this.handleChange}
                            defaultOptions
                            cacheUniqs={[content_type]}
                    />
                    </Nav.Item>
            </>
            );
    }
    }

    export default SearchBoxDropDown;

`

What's your environment?

"react": "^16.8.6", "react-select": "^3.1.0", "react-select-async-paginate": "^0.4.0-alpha.1",

Hi,
How can I update loaded options in loadOptions ?

Currently I only can add new options into previous list option.
However I need to rebuild the previous options base on new options.
Is it possible to do so ?

Thanks

FAQ

1. How can I change placeholder value?

What is the current behavior?

I don't see any default placeholder in the input box.

What is the expected behavior?

By default, a placeholder should be seen and a prop to change the placeholder value.

Hi guys,
I use the component to load paginated data from server side.
So the first time the select box's opened it will make a request to server with empty string query to load the first chunk of data, but when scrolling down the dropdown is stuck there and the component won't load the next chunk. Closing the select dropdown and then open it again and everything works perfectly.
Is there someone happen to have the same issue with mine? Can you give me some advise?

BUG

What is the current behaviour?

import AsyncPaginate from "react-select-async-paginate";

./node_modules/react-select-async-paginate/es/async-paginate-base.js
Attempt import error: 'components' is not exported from react-select (imported as 'default-components')

What is the expected behavior?

the import of the lib to work

I am getting the above error when using :
react-select:3.0.8
react-select-async-paginate:0.3.10

Hello!

I'm trying to forward a ref to the select component so I could focus it but I'm having trouble doing so and there is not much about it in the documentation. When I forward a ref to the selectRef prop, I get StateManager object as a current ref.

Is this possible to do, and if yes, how so?
Great coponent btw, thanks! :)

Edit
Oh, I figured it. I guess I had to access the Select object in the StateManager object, which has a method for focus.

Hi there. Thank you for creating this awesome library for us. :)

I see in the example it has import 'babel-polyfill';. That works perfectly.

My question is: can we use @babel/plugin-transform-runtime to transform instead?
So that people using this library don't have to use polyfill.

If needed, I can create a pull request.

Thanks.

Are you submitting a bug report or a feature request?

BUG

What is the current behavior?

menuIsOpen prop doesn't working at all.

What is the expected behavior?

menuIsOpen should work like with default react-select.

Sandbox Link

https://codesandbox.io/s/qkp90l5wr9

How can I solve this issue in another way? I have my own "dropdown" and I'm showing opened select inside this dropdown - http://prntscr.com/n3zmzo
How it needs to be - http://prntscr.com/n3zmqh
With simple react-select all works properly.

Are you submitting a bug report or a feature request?

feature request

What is the current behavior?

You cannot choose not to cache with AsyncPaginateBase

What is the expected behavior?

ability to not cache search results

Sandbox Link

https://codesandbox.io/s/6y34j51k1n

What's your environment?

react 16.2
react-select-async-paginate 0.3.11

Other information

In the application I'm working on, the results I load are different if you have selected an option already. This causes problems if you've searched for multiple types of options and then click on one. Now the type you're not supposed to be able to see is cached and is visible.

Trying to get around this with cacheUniq, but it isn't working because I don't want to clear the selected options from the cache (then the app shows nothing). I just want to clear the previously loaded ones.

Are you submitting a bug report or a feature request?

Bug report

What is the current behavior?

When menu has already been opened, there is no loading.
Once you choose a value and re-open the menu, loading is occuring (at the same data position).
This was only tested with multiple values select.

What is the expected behavior?

Once you choose a value and re-open the menu, loading should not ocurring (at the same data position).

Sandbox Link

This is the official multi example : https://codesandbox.io/s/2323yrlo9r
I could not reproduce the problem, but note that it doesn't use remote data.

What's your environment?

react-select 2.2.0 / 2.3.0
react-select-async-paginate: 0.2.6 / 0.2.7
chrome

Are you submitting a bug report or a feature request?

Feature request.

What is the current behavior?

TypeScript definitions contain only the AsyncPaginate component.

What is the expected behavior?

TypeScript definitions should also contain the AsyncPaginateBase component.

What's your environment?

react-select: 2.0.0, react-select-async-paginate: 0.3.8

What is the current behavior?

Provided onMenuClose and onMenuOpen props are not being passed/called from AsyncPaginate component.

What is the expected behavior?

<AsyncPaginate
  ...props
  onMenuOpen={() => console.log('opened')}
  onMenuClose={() => console.log('closed')}
/>

This should log to the console on open/closed but the callback is not fired at all.

I don't want to see first load when I open select in first time. Could you add the ability to set the initial values for the options?

Could we change the PropType of the selectRef from

PropTypes.func

to

PropTypes.oneOfType([
PropTypes.func,
PropTypes.object,
]);

To support useRef type of MutableObject.

See: https://stackblitz.com/edit/react-async-ref-type
Look at the console warnings.

I can open a PR if this is an ok change. Thoughts?

typings I currently use:

import * as React from 'react';
import Select, { Props as SelectProps } from './Select';
import { handleInputChange } from './utils';
import manageState from './stateManager';
import { OptionsType, InputActionMeta } from './types';

export interface AsyncProps<OptionType> {
  /* The default set of options to show before the user starts searching. When
     set to `true`, the results for loadOptions('') will be autoloaded.
     Default: false. */
  defaultOptions?: OptionsType<OptionType> | boolean;
  /* Function that returns a promise, which is the set of options to be used
     once the promise resolves. */
  loadOptions: (inputValue: string, callback: ((options: OptionsType<OptionType>) => void)) => Promise<any> | void;
  /* If cacheOptions is truthy, then the loaded data will be cached. The cache
     will remain until `cacheOptions` changes value.
     Default: false. */
  cacheOptions?: any;
}

export type Props<OptionType> = SelectProps<OptionType> & AsyncProps<OptionType>;

export const defaultProps: Props<any>;

export interface State<OptionType> {
  defaultOptions?: OptionsType<OptionType>;
  inputValue: string;
  isLoading: boolean;
  loadedInputValue?: string;
  loadedOptions: OptionsType<OptionType>;
  passEmptyOptions: boolean;
}

export class Async<OptionType> extends React.Component<Props<OptionType>, State<OptionType>> {
  static defaultProps: Props<any>;
  select: React.Ref<any>;
  lastRequest: {};
  mounted: boolean;
  optionsCache: { [key: string]: OptionsType<OptionType> };

  focus(): void;
  blur(): void;
  loadOptions(inputValue: string, callback: (options: OptionsType<OptionType>) => void): void;
  handleInputChange: (newValue: string, actionMeta: InputActionMeta) => string;
}

export function makeAsyncSelect(SelectComponent: React.ComponentType<any>): Async<any>;

export default Async;

bug report

What is the current behavior?

I'm trying to control the loading of new pages by using the shouldLoadMore prop. If you see the code sandbox, shouldLoadMore is returning false and on first opening of the drop down no loading happens, which is what I would expect. On opening the drop down a second time, loading happens which I believe is not the expected behavior.

What is the expected behavior?

If shouldLoadMore returns false, no loading should happen anytime the drop down is opened.

Sandbox Link

https://codesandbox.io/s/customization-check-of-the-need-of-load-options-u75uf

What's your environment?

"react-select": "3.0.4",
"react-select-async-paginate": "0.3.2"
Mac OS 10.13.6
Chrome Version 79.0.3945.130 (Official Build) (64-bit)