[SelectInput] Only attach click handler to label if a labelId is pass…

…ed (#30239)
mui · Feb 7, 2022 · 40885ed · 40885ed
1 parent c3beda9
commit 40885ed
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 0 deletions.
diff --git a/packages/mui-material/src/Select/Select.test.js b/packages/mui-material/src/Select/Select.test.js
@@ -1304,4 +1304,17 @@ describe('<Select />', () => {
       expect(getByTestId('root')).to.have.class('bar');
     });
   });
+
+  it('should not focus select when clicking an arbitrary element with id="undefined"', () => {
+    const { getByRole, getByTestId } = render(
+      <React.Fragment>
+        <div id="undefined" data-testid="test-element" />
+        <Select value="" />
+      </React.Fragment>,
+    );
+
+    fireEvent.click(getByTestId('test-element'));
+
+    expect(getByRole('button')).not.toHaveFocus();
+  });
 });
diff --git a/packages/mui-material/src/Select/SelectInput.js b/packages/mui-material/src/Select/SelectInput.js
@@ -187,6 +187,9 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
   }, [autoFocus]);
 
   React.useEffect(() => {
+    if (!labelId) {
+      return undefined;
+    }
     const label = ownerDocument(displayRef.current).getElementById(labelId);
     if (label) {
       const handler = () => {