yahoo / jafar

🌟!(Just another form application renderer)

Home Page:https://yahoo.github.io/jafar

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

AsyncMultiSelect display 'no options'

WangLarry opened this issue · comments

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

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('');
  }

@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 :)