[Select] Right click opens select menu (#19434)

mui · Jan 30, 2020 · 15d182c · 15d182c
1 parent 7e97de3
commit 15d182c
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 0 deletions.
diff --git a/packages/material-ui/src/Select/Select.test.js b/packages/material-ui/src/Select/Select.test.js
@@ -671,6 +671,30 @@ describe('<Select />', () => {
 
       expect(getByRole('listbox')).to.be.ok;
     });
+
+    it('open only with the left mouse button click', () => {
+      // Test for https://github.com/mui-org/material-ui/issues/19250#issuecomment-578620934
+      // Right/middle mouse click shouldn't open the Select
+      const { getByRole, queryByRole } = render(
+        <Select value="">
+          <MenuItem value="">
+            <em>None</em>
+          </MenuItem>
+          <MenuItem value={10}>Ten</MenuItem>
+          <MenuItem value={20}>Twenty</MenuItem>
+          <MenuItem value={30}>Thirty</MenuItem>
+        </Select>,
+      );
+
+      const trigger = getByRole('button');
+
+      // If clicked by the right/middle mouse button, no options list should be opened
+      fireEvent.mouseDown(trigger, { button: 1 });
+      expect(queryByRole('listbox')).to.not.exist;
+
+      fireEvent.mouseDown(trigger, { button: 2 });
+      expect(queryByRole('listbox')).to.not.exist;
+    });
   });
 
   describe('prop: autoWidth', () => {

diff --git a/packages/material-ui/src/Select/SelectInput.js b/packages/material-ui/src/Select/SelectInput.js
@@ -105,6 +105,9 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
   };
 
   const handleMouseDown = event => {
+    if (event.button !== 0)
+      // ignore everything but left-click
+      return;
     // Hijack the default focus behavior.
     event.preventDefault();
     displayNode.focus();