Repository: mui/material-ui (TypeScript)
Date: 2019-12-15 18:38:22+00:00
Task type: Bug Fix

Issue:
[Select] Controlled select field does not lose focus when clicking outside the component
Select field focus is not lost when a controlled select field is opened via the controlling component and then clicked away from.

- [x] The issue is present in the latest release.
- [x] I have searched the [issues](https://github.com/mui-org/material-ui/issues) of this repository and believe that this is not a duplicate.

## Current Behavior 😯

When using a button to open the menu, it is impossible to lose the field focus without clicking into the menu again.

## Expected Behavior 🤔

Once the menu has been opened via either clicking into the menu or via the external button, clicking outside of the field should lose focus.

## Steps to Reproduce 🕹

Steps:
1. Go to the Controlled select demo at https://material-ui.com/components/selects/#controlled-open-select
2. Open the menu normally (ie not using the button) - it behaves as expected and when clicking outside the field focus is lost. 
3. Then use the "Open" button -select your option and notice you are unable to lose the field's focus.

(I have omitted a sandbox as it is present in the demo site.)

## Context 🔦

I have multiple checkboxes that open select menus when checked, they are currently all retaining focus which is making them unusable.

| Tech        | Version |
| ----------- | ------- |
| Material-UI | Demo site version  |
| React       |    Demo site version   |




Issue discussion:
It seems that the behavior has changed in #17299. @barnc @eps1lon What do you think of this diff?

```diff
diff --git a/packages/material-ui/src/Select/SelectInput.js b/packages/material-ui/src/Select/SelectInput.js
index 8afedfc12..f82564bb2 100644
--- a/packages/material-ui/src/Select/SelectInput.js
+++ b/packages/material-ui/src/Select/SelectInput.js
@@ -110,11 +110,8 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
       if (onOpen) {
         onOpen(event);
       }
-    } else {
-      displayNode.focus();
-      if (onClose) {
-        onClose(event);
-      }
+    } else if (onClose) {
+      onClose(event);
     }

     if (!isOpenControlled) {
```

Does it seem to give the desired behavior? (At least the tests are green & we might want to add a new one)

![Dec-09-2019 16-16-22](https://user-images.githubusercontent.com/3165635/70447612-4d772e80-1a9f-11ea-9903-d08090a555c3.gif)

Behaviour looks good to me 👍 but I can't really comment on the diff - not very clued up on MUI's inner workings to be honest!
Your report and point of view on the correct behavior is already very valuable. 
Working on this.

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
@@ -110,11 +110,8 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
       if (onOpen) {
         onOpen(event);
       }
-    } else {
-      displayNode.focus();
-      if (onClose) {
-        onClose(event);
-      }
+    } else if (onClose) {
+      onClose(event);
     }
 
     if (!isOpenControlled) {


Test patch:
diff --git a/packages/material-ui/src/Select/Select.test.js b/packages/material-ui/src/Select/Select.test.js
--- a/packages/material-ui/src/Select/Select.test.js
+++ b/packages/material-ui/src/Select/Select.test.js
@@ -593,6 +593,39 @@ describe('<Select />', () => {
       clock.restore();
     });
 
+    it('should not focus on close controlled select', () => {
+      function ControlledWrapper() {
+        const [open, setOpen] = React.useState(false);
+
+        return (
+          <div>
+            <button type="button" id="open-select" onClick={() => setOpen(true)}>
+              Open select
+            </button>
+            <Select
+              MenuProps={{ transitionDuration: 0 }}
+              open={open}
+              onClose={() => setOpen(false)}
+              value=""
+            >
+              <MenuItem onClick={() => setOpen(false)}>close</MenuItem>
+            </Select>
+          </div>
+        );
+      }
+      const { container, getByRole } = render(<ControlledWrapper />);
+      const openSelect = container.querySelector('#open-select');
+      openSelect.focus();
+      fireEvent.click(openSelect);
+
+      const option = getByRole('option');
+      expect(option).to.have.focus;
+      fireEvent.click(option);
+
+      expect(container.querySelectorAll('.Mui-focused').length).to.equal(0);
+      expect(openSelect).to.have.focus;
+    });
+
     it('should allow to control closing by passing onClose props', () => {
       function ControlledWrapper() {
         const [open, setOpen] = React.useState(false);