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:
- Go to 'https://yahoo.github.io/jafar/demo-react-components.html'
- Click AsyncMultiSelect on left navmenu
- Click ' simple select' on right panel
- It will display 'no options' firstly.
- Then click it again, will display correct data.
Expected behavior
It should display correct data firstly, or display loading indicator.
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 :)