React-select: onSelectCloseMenu - new prop option to close menu upon select

[rajeshps]

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

[rahulinaction]

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

[rahulinaction]

@rajeshps I think the auto blur option is there for this purpose.Did you use that ie set autoblur to true

[jetaix]

+1

[rajeshps]

@rahulinaction - checking this after a while thus a late reply. Didn't really tried blur option as the manual patch worked for sometime.

Later with 1.0.0RC the expected behavior works by default without additional handling.

@jetaix @rahulinaction Thanks for the +1

Closing this for now.

[mwilliamson-healx]

With 1.0.0-rc.2, I'm still seeing the menu open after selecting an option. Is this just something weird that I've done, or are others seeing the same behaviour?

[rajeshps]

@mwilliamson-healx - You are right, this doesn't work when I make a plain test.
However, when have dynamically injected the component based on configuration something is forcing Menu to close; not sure what. I may have to dig little deeper to check that though but later.

For now will be re-opening this issue and hope the feature is considered and included by react-select team.

Thanks,
Rajesh

[anuragCES]

@JedWatson

Do you have any update on adding this prop?

Or can I use any of the RC version which has this fix? If not I can look into fixing it.

Please do let me know.

Thank you.

[js2me]

prop autoBlur for resolve this things

[bladey]

Hello -

In an effort to sustain the react-select project going forward, we're closing old issues / pull requests.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our limited efforts to maintain the latest version.

If you feel this issue / pull request is still relevant and you'd like us to review it, please leave a comment and we'll do our best to get back to you.