Repository: mui/material-ui (TypeScript)
Date: 2020-04-29 11:06:17+00:00
Task type: Bug Fix

Issue:
Simple Select Label Unfocused
- [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 😯

- Clicking on an InputLabel linked to a Simple Select is not focusing its Select
- Clicking on an InputLabel linked to a Native Select is focusing its Select

## Expected Behavior 🤔

- Clicking on an InputLabel linked to any Select should focus its Select

## Steps to Reproduce 🕹

Steps: https://codesandbox.io/s/material-demo-hr9dn

1. Click on both labels named *Age*
2. Notice no focus for Simple Select
3. Notice focus for Native Select

## Context 🔦

I believe both select should provide similar functionality

## Your Environment 🌎

| Tech        | Version |
| ----------- | ------- |
| Material-UI | v4.9.12  |
| React       | v16.13.1 |
| Browser     | Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.113 Safari/537.36 |

Simple Select Label Unfocused
- [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 😯

- Clicking on an InputLabel linked to a Simple Select is not focusing its Select
- Clicking on an InputLabel linked to a Native Select is focusing its Select

## Expected Behavior 🤔

- Clicking on an InputLabel linked to any Select should focus its Select

## Steps to Reproduce 🕹

Steps: https://codesandbox.io/s/material-demo-hr9dn

1. Click on both labels named *Age*
2. Notice no focus for Simple Select
3. Notice focus for Native Select

## Context 🔦

I believe both select should provide similar functionality

## Your Environment 🌎

| Tech        | Version |
| ----------- | ------- |
| Material-UI | v4.9.12  |
| React       | v16.13.1 |
| Browser     | Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.113 Safari/537.36 |



Issue discussion:
I think it worth mentioning even if the Simple Select doesn't get focus, linking it with its InputLabel allows screen reader to access it
Issue is also reproductible on latest iOS Safari
I think it worth mentioning even if the Simple Select doesn't get focus, linking it with its InputLabel allows screen reader to access it
Issue is also reproductible on latest iOS Safari

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
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
+import ownerDocument from '../utils/ownerDocument';
 import capitalize from '../utils/capitalize';
 import { refType } from '@material-ui/utils';
 import Menu from '../Menu/Menu';
@@ -90,6 +91,25 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
     }
   }, [autoFocus, displayNode]);
 
+  React.useEffect(() => {
+    if (displayNode) {
+      const label = ownerDocument(displayNode).querySelector(`#${labelId}`);
+      if (label) {
+        const handler = () => {
+          if (getSelection().isCollapsed) {
+            displayNode.focus();
+          }
+        };
+        label.addEventListener('click', handler);
+        return () => {
+          label.removeEventListener('click', handler);
+        };
+      }
+    }
+
+    return undefined;
+  }, [labelId, displayNode]);
+
   const update = (open, event) => {
     if (open) {
       if (onOpen) {


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
@@ -6,6 +6,7 @@ import { act, createClientRender, fireEvent } from 'test/utils/createClientRende
 import consoleErrorMock from 'test/utils/consoleErrorMock';
 import MenuItem from '../MenuItem';
 import Input from '../Input';
+import InputLabel from '../InputLabel';
 import Select from './Select';
 import { spy, stub, useFakeTimers } from 'sinon';
 
@@ -191,6 +192,19 @@ describe('<Select />', () => {
     expect(handleClose.callCount).to.equal(1);
   });
 
+  it('should focus select when its label is clicked', () => {
+    const { getByRole, getByTestId } = render(
+      <React.Fragment>
+        <InputLabel id="label" data-testid="label" />
+        <Select value="" labelId="label" />
+      </React.Fragment>,
+    );
+
+    fireEvent.click(getByTestId('label'));
+
+    expect(getByRole('button')).toHaveFocus();
+  });
+
   it('should focus list if no selection', () => {
     const { getByRole } = render(<Select value="" autoFocus />);