Repository: mui/material-ui (TypeScript)
Date: 2020-05-15 15:00:08+00:00
Task type: Bug Fix

Issue:
Select Input label causing error with certain IDs
A recent change introduced in pull request [20833](https://github.com/mui-org/material-ui/pull/20833) is failing on certain ids.

<!--
  Thank you very much for contributing to Material-UI by creating an issue! ❤️
  To avoid duplicate issues we ask you to check off the following list.
-->

<!-- Checked checkbox should look like this: [x] -->

- [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 😯

This pull request makes naive use of querySelector() (simply prepending "#" to the id name verbatim).

Because querySelector() uses CSS selectors, and because CSS selectors have slightly different rules to HTML element ids, this is causing ids with certain symbols to fail.

In the worst case, material ui crashes entirely. In other cases, it just causes the functionality itself to fail.

## Expected Behavior 🤔

This code should be able to handle symbols in ids, as they are valid in html ids, and as worked in previous versions.

For example, is there any reason for using querySelector() over getElementById(), considering what the code has is an id and what it wants to get is an element?

If there's some reason for using querySelector(), it should sanitize the input it passes by escaping any special characters.

## Steps to Reproduce 🕹

I've created three examples on codesandbox:

- [First example](https://codesandbox.io/s/goofy-dhawan-z3kpk?file=/src/Demo.js): This exhibits an actual crash using `<Select>` and `<InputLabel>` with a failing labelId.
- [Second example](https://codesandbox.io/s/busy-gauss-o3hlk?file=/src/Demo.js): This exhibits how it can fail using `<TextField>`.
- [Third example](https://codesandbox.io/s/nameless-feather-1cum5?file=/src/Demo.js): This exhibits an id which fails but does not cause an outright crash. Here, one label fails because it has a special character, another works as-is.

All of these examples should work as-is in the previous version.

Steps:

1. Use a select-style `<TextField>` with a special character in its id property.

OR

1. Use a `<Select>` with a special character in its labelId property.

## Context 🔦

We currently use some of these special characters in auto-generated ids.

## Your Environment 🌎

It happens with @material-ui/core 4.9.14. It did not happen prior to this version.



Issue discussion:

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
@@ -93,7 +93,7 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
 
   React.useEffect(() => {
     if (displayNode) {
-      const label = ownerDocument(displayNode).querySelector(`#${labelId}`);
+      const label = ownerDocument(displayNode).getElementById(labelId);
       if (label) {
         const handler = () => {
           if (getSelection().isCollapsed) {


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
@@ -195,8 +195,8 @@ describe('<Select />', () => {
   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" />
+        <InputLabel id="my$label" data-testid="label" />
+        <Select value="" labelId="my$label" />
       </React.Fragment>,
     );