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?

https://github.com/JedWatson/react-select/issues/927. There might be some useful comments here. — Yvo Linssen, Mar 15 '18 at 12:38

score 175 · Answer 1 · answered Jan 14 '19 at 13:16

175

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

answered Jan 14 '19 at 13:16

dana2208

1,781
1
10
5

3

perfect answer, this covers all cases – IonutAnin Oct 13 '20 at 23:01
18

with the latest versions you may need to delete the "focusout" event listener instead of blur. – JonH May 19 '22 at 19:23

score 69 · Answer 2 · answered Nov 03 '18 at 21:33

69

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.

answered Nov 03 '18 at 21:33

Andrea Rosales

961
1
7
11

I use menuIsOpen. it worked but when I click on select for change my selected option, It didn't open again. – Ali Mar 01 '22 at 10:55

score 41 · Answer 3 · answered Apr 24 '21 at 03:17

41

That's work for me:

menuIsOpen={true}

answered Apr 24 '21 at 03:17

Mohamad amin Moslemi

580
5
4

Worked Fine, this should be the right answer – Pavan Kumar V Mar 12 '23 at 07:45

Harsh Makadia · Answer 4 · 2020-08-29T05:16:28.087

16

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)

edited Aug 29 '20 at 05:16

answered Aug 29 '20 at 04:55

Harsh Makadia

3,263
5
30
42

If using F8 does not work this is second easiest solution. Thanks! – Firiam Dec 23 '21 at 10:24
Used to do this; note however that this may prevent e.g. React Dev Tools from working - removing the blur handler per the top answer works better! – btown Jul 13 '22 at 19:26
1

Nice one, works for me where the other solutions failed. – lofihelsinki Apr 21 '23 at 06:54

score 8 · Answer 5 · edited Sep 20 '19 at 12:22

8

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

edited Sep 20 '19 at 12:22

Tasos K.

7,979
7
39
63

answered Sep 20 '19 at 11:55

konrad

111
1
6

Doesn't work on Windows 10 Chrome 80+. Dropdown is closed as soon as debugging starts. – Daniel Kmak Jun 22 '20 at 13:47

score 4 · Answer 6 · answered Jan 24 '22 at 04:55

4

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

answered Jan 24 '22 at 04:55

stanley355

91
6

score 3 · Answer 7 · edited Sep 20 '19 at 12:22

3

Maybe this could help:

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

edited Sep 20 '19 at 12:22

Tasos K.

7,979
7
39
63

answered Jun 28 '19 at 10:03

Slobodan Krasavčević

84
3

this is the only thing that worked. by the way, you cannot use this inside set timeout that way, you have to create a variable reference outside – user151496 Jul 20 '21 at 15:52

score 3 · Answer 8 · edited Feb 01 '22 at 13:19

3

in select component send this as props

menuIsOpen={true}

edited Feb 01 '22 at 13:19

Syscall

19,327
10
37
52

answered Feb 01 '22 at 12:48

mahesh murugan

33
2

score 2 · Answer 9 · answered Dec 18 '19 at 21:32

2

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

answered Dec 18 '19 at 21:32

ghashi

1,497
1
13
17

score 1 · Answer 10 · edited Mar 16 '18 at 12:14

1

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

edited Mar 16 '18 at 12:14

L Y E S - C H I O U K H

4,765
8
40
57

answered Mar 15 '18 at 21:15

Michael D

96
6

score -6 · Answer 11 · answered Mar 15 '18 at 20:00

-6

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

answered Mar 15 '18 at 20:00

Pinki Gupta

14
3

1

As soon as you click somewhere in the inspector you will lose the focus. – Stan Bright Apr 08 '18 at 03:14
This actually won't work, the problem is you cannot perform any action or the menu would disappear – engma Jan 07 '19 at 22:27

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

11 Answers11

Linked