react-select: how to keep dropdown open when styling in inspector?
ReactjsNpmComponentsReact SelectReactjs Problem Overview
I'm using react-select and I'm customizing it,I didn't found an option to do this. Is there some workaround I can use to keep dropdown open when I'm styling it?
Reactjs Solutions
Solution 1 - Reactjs
In chrome, got to Elements > Event Listeners > open "blur" > with the mouse go to the right of where it is written "document", then you can see a button "Remove" > click on it
Solution 2 - Reactjs
If you're using V2 there's a menuIsOpen prop you can use to keep the menu open at all times.
If you're using Chrome and you have the React Developer Tools plugin, you can inspect your component in the React tab of the console and manually toggle this property right from your browser. For V1, you can toggle the isOpen state to achieve the same behavior.
Solution 3 - Reactjs
That's work for me:
menuIsOpen={true}
Solution 4 - Reactjs
Simple hack goes this way
Run this command on your console open the menu and then wait for 5 seconds and the debugger will automatically be applied and screen will be freezed.
setTimeout(() => {debugger;}, 5000)
Solution 5 - Reactjs
Beforehand I exec window.onkeydown = () => {debugger} in js console and after expanding the dropdown I click any key
It's important to keep developer tools open
Solution 6 - Reactjs
Maybe this could help:
<Select
ref={el => (this.selectRef =el)}
onBlur={() => {
setTimeout(
() =>
this.selectRef.setState({
menuIsOpen: true,
}),
50
);
}}
/>
Solution 7 - Reactjs
If you are using Google Chrome to debug. You can hover over the select drop down and press Ctrl+Shift+C simultaneously and it should be automatically selected in the debug window
Solution 8 - Reactjs
By using the Chrome React extension, you can force the "isOpen" (v3: "menuIsOpen") state value to true on the Select component.
more info here: https://github.com/JedWatson/react-select/issues/927#issuecomment-313022873
Solution 9 - Reactjs
You can use the menuIsOpen props. It was on the react-select documentation and it works!
Docs: https://react-select.com/props
Screenshot:
Solution 10 - Reactjs
in select component send this as props
menuIsOpen={true}
Solution 11 - Reactjs
Open dropdown and then right click on dropdown... it will drown a pop over and on inspector.. now you can work upon your dropdown.