onSelectCloseMenu - new prop option to close menu upon select
See original GitHub issueHi,
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:
- Created 7 years ago
- Reactions:7
- Comments:9 (1 by maintainers)
+1 . Usability wise makes much sense to incorporate this feature.
prop
autoBlur
for resolve this things