[Select] Fix listbox closing on Space keyUp

mui · Dec 9, 2019 · 783afbf · 783afbf
1 parent f5c77d7
commit 783afbf
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 1 deletion.
diff --git a/packages/material-ui/src/Select/Select.test.js b/packages/material-ui/src/Select/Select.test.js
@@ -148,8 +148,10 @@ describe('<Select />', () => {
       getByRole('button').focus();
 
       fireEvent.keyDown(document.activeElement, { key });
+      expect(getByRole('listbox', { hidden: false })).to.be.ok;
 
-      expect(getByRole('listbox')).to.be.ok;
+      fireEvent.keyUp(document.activeElement, { key });
+      expect(getByRole('listbox', { hidden: false })).to.be.ok;
     });
   });
 
@@ -485,7 +487,9 @@ describe('<Select />', () => {
       getByRole('button').focus();
 
       fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' });
+      expect(queryByRole('listbox')).not.to.be.ok;
 
+      fireEvent.keyUp(document.activeElement, { key: 'ArrowDown' });
       expect(queryByRole('listbox')).not.to.be.ok;
     });
   });
@@ -871,4 +875,20 @@ describe('<Select />', () => {
       expect(getByLabelText('A select')).to.have.property('tagName', 'SELECT');
     });
   });
+
+  it('prevents the default when releasing Space on the children', () => {
+    const keyUpSpy = spy(event => event.defaultPrevented);
+    render(
+      <Select value="one" open>
+        <MenuItem onKeyUp={keyUpSpy} value="one">
+          One
+        </MenuItem>
+      </Select>,
+    );
+
+    fireEvent.keyUp(document.activeElement, { key: ' ' });
+
+    expect(keyUpSpy.callCount).to.equal(1);
+    expect(keyUpSpy.returnValues[0]).to.equal(true);
+  });
 });
diff --git a/packages/material-ui/src/Select/SelectInput.js b/packages/material-ui/src/Select/SelectInput.js
@@ -257,6 +257,18 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
     return React.cloneElement(child, {
       'aria-selected': selected ? 'true' : undefined,
       onClick: handleItemClick(child),
+      onKeyUp: event => {
+        if (event.key === ' ') {
+          // otherwise our MenuItems dispatches a click event
+          // it's not behavior of the native <option> and causes
+          // the select to close immediately since we open on space keydown
+          event.preventDefault();
+        }
+        const { onKeyUp } = child.props;
+        if (typeof onKeyUp === 'function') {
+          onKeyUp(event);
+        }
+      },
       role: 'option',
       selected,
       value: undefined, // The value is most likely not a valid HTML attribute.