Feature Request: Disable enter key form submission optionally

[dakur]

In addition to #3823 which solves problem of submitting whole form when menu is opened and no options available, I would welcome possibility of preventing Enter key in menu-closed state as well.

Currently, I can work-around it with onMenuOpen, onMenuClose and local variable, but I suggest it is part of the API.

[ebonow]

@dakur, just to be clear, is this the functionality you were hoping to condense into a single prop?

const [ isMenuOpen, setIsMenuOpen ] = useState();

return <Select 
  onMenuOpen={() => setIsMenuOpen(true)} 
  onMenuClose={() => setIsMenuOpen(false)}
  onKeyDown={e => !isMenuOpen && e.code === 'Enter' && event.preventDefault() }
  {...otherProps}
/>

[dakur]

Well… actually… yes! 😄 Brain eclipse, probably, sorry. Not worthy of new prop, I guess. :-)

[dakur]

Or is it? It has better performance than listening on every key down, maybe.

[TheSecondPower]

In most cases the consuming project doesn't need to provide menuIsOpen and can let the component handle that itself. So this is 4 additional props (menuIsOpen, onMenuOpen, onMenuClose, and onKeyDown) along with state management. By default a standard <select /> HTML element doesn't submit a <form /> on Enter. So all of this is just to achieve the default behavior of the vanilla HTML element.