react-select: how to keep dropdown open when styling in inspector?

Open dropdown and then right click on dropdown... it will drown a pop over and on inspector.. now you can work upon your dropdown.

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

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.

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

Maybe this could help:

<Select
ref={el => (this.selectRef =el)}
onBlur={() => {
setTimeout(
() =>
this.selectRef.setState({
menuIsOpen: true,
}),
50
);
}}
/>

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

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

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)

That's work for me:

menuIsOpen={true}

You can use the menuIsOpen props. It was on the react-select documentation and it works! Docs: https://react-select.com/props Screenshot:

in select component send this as props

menuIsOpen={true}