question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

onSelectCloseMenu - new prop option to close menu upon select

See original GitHub issue

Hi,

At first thanks for the nicely written react specific select component/library.

I have a feature request to have the option menu close when each time the value is selected “in multi mode” though. This already anyway happens for single select, no problems or issues here. When it is in multi mode, would be better to control the behavior of menu to close/hide. Basically this came or was raised as usability issue that users won’t be able to close the menu unless they either click outside anywhere or on the arrow or press tab button - not self explaining or intuitive experience to click outside to close the menu when selection action is complete in multi mode.

Not sure if this could be achieved without modifying/fixing the source already - I mean just by tweaking the props as of now.

As I couldn’t figure out the options, for now I could get what I wanted by changing the source as onSelectCloseMenu: React.PropTypes.bool, in select.js onSelectCloseMenu: false in select.js

in select.js

handleKeyDown (event) {.......

         case 13: // enter
         ..............
         ..............
         if(this.props.multi && this.props.onSelectCloseMenu) {
               this.closeMenu();
         }
        ................
         break;
         case 27: // escape
}

similarly

selectValue (value) {
         if (this.props.multi) {
              this.addValue(value);
                  .....................
                  .....................
              if(this.props.multi && this.props.onSelectCloseMenu) {
                this.closeMenu();
               }       
           } else {
                    ............
           }
}

And finally when passing props / options we’ll be able to control like this <Select multi simpleValue onSelectCloseMenu....

Hope this would be considered and added to the component base as an option to control by developer. Primary reason for this request is to avoid custom override by me to the source negating the opportunity of getting direct updates through npm.

Thanks, Rajesh

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:7
  • Comments:9 (1 by maintainers)

github_iconTop GitHub Comments

3reactions
rahulinactioncommented, May 9, 2016

+1 . Usability wise makes much sense to incorporate this feature.

1reaction
js2mecommented, Jul 17, 2017

prop autoBlur for resolve this things

Read more comments on GitHub >

github_iconTop Results From Across the Web

Close react-select menu programmatically - Stack Overflow
I need to implement a 'Close' button in Menu component of react-select. How can I close Menu after clicking on this button? Is...
Read more >
react-select - Bountysource
onSelectCloseMenu - new prop option to close menu upon select $ 0 ... Created 6 years ago in JedWatson/react-select with 8 comments. Hi,....
Read more >
index prop replaced with reduce | Vue Select
v2.x provided the index {String} prop to return a single key from a selected object; v3.x removes the index prop, replacing it with...
Read more >
Props Context Menu - Poser
Select : Expand the Select menu to select the prop or another item from the menu that ... Hide Object: Hides the actor...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found