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

Question

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?

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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.

Answer 5

Maybe this could help:

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

Answer 6

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