I have a react-select component to preform search on an api , and a button to start the search.
i've tried to set menuIsOpen={true} after button click but it ruins the original focus blur behavior the menu is no longer closing on blur. tried to set .focus() on the input it didn't open the menu.
current original behavior menu is opening on focus and closing on blur , i want to keep this plus i want to open the menu after i click the button.
To achieve what you want you will need to use a controlled menuIsOpen
props.
I think the easiest way to keep all the native functionality of react-select
is to use a combination of the props onInputChange
and onFocus
like the following code:
class App extends Component {
constructor(props) {
super(props);
this.state = {
menuIsOpen: false
};
}
onInputChange = (options, { action }) => {
if (action === "menu-close") {
this.setState({ menuIsOpen: false });
}
};
openMenu = () => {
this.refs.focus();
this.setState({ menuIsOpen: true });
};
render() {
return (
<div className="App">
<Select
ref={r => {
this.refs = r;
}}
options={options}
onFocus={this.openMenu}
onInputChange={this.onInputChange}
menuIsOpen={this.state.menuIsOpen}
/>
<button onClick={this.openMenu}>Open Select</button>
</div>
);
}
}
Here a live example.