Repository: mui/material-ui (TypeScript)
Date: 2019-02-07 11:29:04+00:00
Task type: Bug Fix

Issue:
Open Select menu by pressing Enter button when Select in focus
<!--- Provide a general summary of the feature in the Title above -->

<!--
    Thank you very much for contributing to Material-UI by creating an issue! ❤️
    To avoid duplicate issues we ask you to check off the following list.
-->

<!-- Checked checkbox should look like this: [x] -->
- [*] This is not a v0.x issue. <!-- (v0.x is no longer maintained) -->
- [*] I have searched the [issues](https://github.com/mui-org/material-ui/issues) of this repository and believe that this is not a duplicate.

## Expected Behavior 🤔
We should be able to open Select Menu when Select is in focus by pressing Enter keyboard

## Current Behavior 😯
Select menu when Select in focus is opening with Up-Down Keyboard Arrows




Issue discussion:
> We should be able to open Select Menu when Select is in focus by pressing Enter keyboard

@oknechirik This is a Windows-only behavior. It won't happen on MacOS. I think that we can add the `Enter` key when we detect a windows platform:
https://github.com/mui-org/material-ui/blob/90631bcdeb3bdfbf82f94e71ea2ae8748282a9e2/packages/material-ui/src/Select/SelectInput.js#L127-L141

Something like this:
```diff
 handleKeyDown = event => { 
   if (this.props.readOnly) { 
     return; 
   }

+  const keys = [' ', 'ArrowUp', 'ArrowDown'];

+  if (navigator.platform.indexOf('Win') > -1) {
+    keys.push('Enter');
+  }

-  if ([' ', 'ArrowUp', 'ArrowDown'].indexOf(event.key) !== -1) {   
+  if (keys.indexOf(event.key) !== -1) { 
     event.preventDefault(); 
     // Opening the menu is going to blur the. It will be focused back when closed. 
     this.ignoreNextBlur = true; 
     this.update({ 
       open: true, 
       event, 
     }); 
   } 
 }; 

```

What do you think of this change? Do you want to work on the problem? :)
@oliviertassinari, Is anyone working on this? I am interested in claiming.
@hetpatel33 You are free to go 🚿

Solution patch:
diff --git a/packages/material-ui/src/Select/SelectInput.js b/packages/material-ui/src/Select/SelectInput.js
--- a/packages/material-ui/src/Select/SelectInput.js
+++ b/packages/material-ui/src/Select/SelectInput.js
@@ -129,7 +129,16 @@ class SelectInput extends React.Component {
       return;
     }
 
-    if ([' ', 'ArrowUp', 'ArrowDown'].indexOf(event.key) !== -1) {
+    if (
+      [
+        ' ',
+        'ArrowUp',
+        'ArrowDown',
+        // The native select doesn't respond to enter on MacOS, but it's recommended by
+        // https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html
+        'Enter',
+      ].indexOf(event.key) !== -1
+    ) {
       event.preventDefault();
       // Opening the menu is going to blur the. It will be focused back when closed.
       this.ignoreNextBlur = true;


Test patch:
diff --git a/packages/material-ui/src/Select/SelectInput.test.js b/packages/material-ui/src/Select/SelectInput.test.js
--- a/packages/material-ui/src/Select/SelectInput.test.js
+++ b/packages/material-ui/src/Select/SelectInput.test.js
@@ -220,7 +220,7 @@ describe('<SelectInput />', () => {
       assert.strictEqual(handleBlur.args[0][0].target.name, 'blur-testing');
     });
 
-    [' ', 'ArrowUp', 'ArrowDown'].forEach(key => {
+    [' ', 'ArrowUp', 'ArrowDown', 'Enter'].forEach(key => {
       it(`'should open menu when pressed ${key} key on select`, () => {
         wrapper.find(`.${defaultProps.classes.select}`).simulate('keyDown', { key });
         assert.strictEqual(wrapper.state().open, true);