Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

AsyncMultiSelect display 'no options' #47

Open
WangLarry opened this issue May 26, 2020 · 2 comments
Open

AsyncMultiSelect display 'no options' #47

WangLarry opened this issue May 26, 2020 · 2 comments

Comments

@WangLarry
Copy link

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

  1. Go to 'https://yahoo.github.io/jafar/demo-react-components.html'
  2. Click AsyncMultiSelect on left navmenu
  3. Click ' simple select' on right panel
  4. It will display 'no options' firstly.
  5. Then click it again, will display correct data.

Expected behavior
It should display correct data firstly, or display loading indicator.

Screenshots
Snip20200526_1

@WangLarry
Copy link
Author

In AsyncMultiSelect, handle onMenuOpen event:

   return (
      <SelectInternal
        isMulti={true}
        value={selected} 
        onChange={this.onValueChange}
        options={options}
        placeholder={this.props.state.placeholder}
        isDisabled={this.props.disabled}
        isSearchable={true}
        isLoading={!!this.props.state.isLoading}
        inputValue={this.props.state.searchQuery}
        onInputChange={this.onSearchChange}
        onMenuOpen={this.onMenuOpen}   // <-------- 
        styles={customStyles}
      />
    );
  }
  
  onMenuOpen = () => {
    this.onSearchChange('');
  }

@galhavivi
Copy link
Member

galhavivi commented Jul 4, 2020

@WangLarry 10x :)
"onMenuOpen" actually called also each "onInputChange" so this solution will call "onSearchChange" 2 times on each keypress..
I see the problematic issue.
We try to put as minimum as possible logic behaviour in our "react-components" package since it is meant only to be a mapper from Jafar props to the underline real component props.
I guess this issue (not to show empty search message on focus) can be pointed out and fixed on "https://react-select.com/" (AsyncMultiSelect is rendering it).
If you have another suggestion please share :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants