From 85458a2c573a42cc613956eb4f5ed5aba0b44425 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Fri, 22 Nov 2019 00:27:06 +0100
Subject: [PATCH] fix two interaction issues

---
 .../material-ui/src/Select/Select.test.js     | 24 ++++---------------
 .../material-ui/src/Select/SelectInput.js     |  4 ++++
 .../test/integration/Select.test.js           |  2 --
 3 files changed, 9 insertions(+), 21 deletions(-)

diff --git a/packages/material-ui/src/Select/Select.test.js b/packages/material-ui/src/Select/Select.test.js
index 7a2313c05277be..98bac54121774f 100644
--- a/packages/material-ui/src/Select/Select.test.js
+++ b/packages/material-ui/src/Select/Select.test.js
@@ -93,27 +93,14 @@ describe('<Select />', () => {
     // this means the trigger is blurred immediately
     const handleBlur = spy();
     const { getByRole, getAllByRole, queryByRole } = render(
-      <Select
-        onBlur={handleBlur}
-        onMouseDown={event => {
-          // simulating certain platforms that focus on mousedown
-          if (event.defaultPrevented === false) {
-            event.currentTarget.focus();
-          }
-        }}
-        value=""
-      >
+      <Select onBlur={handleBlur} value="">
         <MenuItem value="">none</MenuItem>
         <MenuItem value={10}>Ten</MenuItem>
       </Select>,
     );
     const trigger = getByRole('button');
 
-    // simulating user click
-    act(() => {
-      fireEvent.mouseDown(trigger);
-      trigger.click();
-    });
+    fireEvent.mouseDown(trigger);
 
     expect(handleBlur.callCount).to.equal(0);
     expect(getByRole('listbox')).to.be.ok;
@@ -611,7 +598,6 @@ describe('<Select />', () => {
       const { getByRole, queryByRole } = render(<ControlledWrapper />);
 
       fireEvent.mouseDown(getByRole('button'));
-
       expect(getByRole('listbox')).to.be.ok;
 
       act(() => {
@@ -651,7 +637,6 @@ describe('<Select />', () => {
       stub(button, 'clientWidth').get(() => 14);
 
       fireEvent.mouseDown(button);
-
       expect(getByTestId('paper').style).to.have.property('minWidth', '14px');
     });
 
@@ -665,7 +650,6 @@ describe('<Select />', () => {
       stub(button, 'clientWidth').get(() => 14);
 
       fireEvent.mouseDown(button);
-
       expect(getByTestId('paper').style).to.have.property('minWidth', '');
     });
   });
@@ -786,7 +770,9 @@ describe('<Select />', () => {
         });
         const { getByRole, getAllByRole } = render(<ControlledSelectInput onChange={onChange} />);
 
-        fireEvent.mouseDown(getByRole('button'));
+        const button = getByRole('button');
+        fireEvent.mouseDown(button);
+        fireEvent.click(button);
         const options = getAllByRole('option');
         fireEvent.click(options[2]);
 
diff --git a/packages/material-ui/src/Select/SelectInput.js b/packages/material-ui/src/Select/SelectInput.js
index d74958eac39eff..dacf3cf85d82ac 100644
--- a/packages/material-ui/src/Select/SelectInput.js
+++ b/packages/material-ui/src/Select/SelectInput.js
@@ -124,6 +124,10 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
   };
 
   const handleMouseDown = event => {
+    // Hijack the default focus behavior.
+    event.preventDefault();
+    displayNode.focus();
+
     update(true, event);
   };
 
diff --git a/packages/material-ui/test/integration/Select.test.js b/packages/material-ui/test/integration/Select.test.js
index 9fcc26ed9dcfe4..c356ac6a3854a8 100644
--- a/packages/material-ui/test/integration/Select.test.js
+++ b/packages/material-ui/test/integration/Select.test.js
@@ -58,7 +58,6 @@ describe('<Select> integration', () => {
       const trigger = getByRole('button');
       // Let's open the select component
       // in the browser user click also focuses
-      trigger.focus();
       fireEvent.mouseDown(trigger);
 
       const options = getAllByRole('option');
@@ -81,7 +80,6 @@ describe('<Select> integration', () => {
       expect(trigger).to.have.text('Ten');
       // Let's open the select component
       // in the browser user click also focuses
-      trigger.focus();
       fireEvent.mouseDown(trigger);
 
       const options = getAllByRole('option');