[material-ui][Select] Aria-controls references invalid id when not ex…

…panded #43876
mui · Jan 2, 2025 · 6385301 · 6385301
1 parent a491dc2
commit 6385301
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/packages/mui-material/src/Select/Select.test.js b/packages/mui-material/src/Select/Select.test.js
@@ -487,6 +487,11 @@ describe('<Select />', () => {
       expect(getByRole('combobox', { hidden: true })).to.have.attribute('aria-controls', listboxId);
     });
 
+    it('indicates that input element has combobox role and aria-controls set to "" when in a non-open state', () => {
+      const { getByRole } = render(<Select open={false} value="" />);
+      expect(getByRole('combobox', { hidden: true })).to.have.attribute('aria-controls', '');
+    });
+
     specify('the listbox is focusable', async () => {
       const { getByRole } = render(<Select open value="" />);
 

diff --git a/packages/mui-material/src/Select/SelectInput.js b/packages/mui-material/src/Select/SelectInput.js
@@ -496,7 +496,7 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
         ref={handleDisplayRef}
         tabIndex={tabIndex}
         role="combobox"
-        aria-controls={listboxId}
+        aria-controls={open ? listboxId : ''}
         aria-disabled={disabled ? 'true' : undefined}
         aria-expanded={open ? 'true' : 'false'}
         aria-haspopup="listbox"