Avoid referencing an ID that is not in the DOM (#5131)

When the menu is not open, do not set the aria props referencing it. Co-authored-by: Nathan Bierema <nbierema@gmail.com>
JedWatson · Apr 10, 2022 · 87e1443 · 87e1443
1 parent c7d8d4b
commit 87e1443
Show file tree

Hide file tree

Showing 7 changed files with 9 additions and 12 deletions.
diff --git a/.changeset/curly-mice-nail.md b/.changeset/curly-mice-nail.md
@@ -0,0 +1,5 @@
+---
+'react-select': patch
+---
+
+Avoid referencing an ID that is not in the DOM
diff --git a/packages/react-select/src/Select.tsx b/packages/react-select/src/Select.tsx
@@ -1560,13 +1560,15 @@ export default class Select<
       'aria-autocomplete': 'list' as const,
       'aria-expanded': menuIsOpen,
       'aria-haspopup': true,
-      'aria-controls': this.getElementId('listbox'),
-      'aria-owns': this.getElementId('listbox'),
       'aria-errormessage': this.props['aria-errormessage'],
       'aria-invalid': this.props['aria-invalid'],
       'aria-label': this.props['aria-label'],
       'aria-labelledby': this.props['aria-labelledby'],
       role: 'combobox',
+      ...(menuIsOpen && {
+        'aria-controls': this.getElementId('listbox'),
+        'aria-owns': this.getElementId('listbox'),
+      }),
       ...(!isSearchable && {
         'aria-readonly': true,
       }),

diff --git a/packages/react-select/src/__tests__/__snapshots__/Async.test.tsx.snap b/packages/react-select/src/__tests__/__snapshots__/Async.test.tsx.snap
@@ -193,11 +193,9 @@ exports[`defaults - snapshot 1`] = `
         >
           <input
             aria-autocomplete="list"
-            aria-controls="react-select-2-listbox"
             aria-describedby="react-select-2-placeholder"
             aria-expanded="false"
             aria-haspopup="true"
-            aria-owns="react-select-2-listbox"
             autocapitalize="none"
             autocomplete="off"
             autocorrect="off"

diff --git a/packages/react-select/src/__tests__/__snapshots__/AsyncCreatable.test.tsx.snap b/packages/react-select/src/__tests__/__snapshots__/AsyncCreatable.test.tsx.snap
@@ -193,11 +193,9 @@ exports[`defaults - snapshot 1`] = `
         >
           <input
             aria-autocomplete="list"
-            aria-controls="react-select-2-listbox"
             aria-describedby="react-select-2-placeholder"
             aria-expanded="false"
             aria-haspopup="true"
-            aria-owns="react-select-2-listbox"
             autocapitalize="none"
             autocomplete="off"
             autocorrect="off"

diff --git a/packages/react-select/src/__tests__/__snapshots__/Creatable.test.tsx.snap b/packages/react-select/src/__tests__/__snapshots__/Creatable.test.tsx.snap
@@ -193,11 +193,9 @@ exports[`defaults - snapshot 1`] = `
         >
           <input
             aria-autocomplete="list"
-            aria-controls="react-select-2-listbox"
             aria-describedby="react-select-2-placeholder"
             aria-expanded="false"
             aria-haspopup="true"
-            aria-owns="react-select-2-listbox"
             autocapitalize="none"
             autocomplete="off"
             autocorrect="off"

diff --git a/packages/react-select/src/__tests__/__snapshots__/Select.test.tsx.snap b/packages/react-select/src/__tests__/__snapshots__/Select.test.tsx.snap
@@ -193,11 +193,9 @@ exports[`snapshot - defaults 1`] = `
         >
           <input
             aria-autocomplete="list"
-            aria-controls="react-select-2-listbox"
             aria-describedby="react-select-2-placeholder"
             aria-expanded="false"
             aria-haspopup="true"
-            aria-owns="react-select-2-listbox"
             autocapitalize="none"
             autocomplete="off"
             autocorrect="off"

diff --git a/packages/react-select/src/__tests__/__snapshots__/StateManaged.test.tsx.snap b/packages/react-select/src/__tests__/__snapshots__/StateManaged.test.tsx.snap
@@ -193,11 +193,9 @@ exports[`defaults > snapshot 1`] = `
         >
           <input
             aria-autocomplete="list"
-            aria-controls="react-select-2-listbox"
             aria-describedby="react-select-2-placeholder"
             aria-expanded="false"
             aria-haspopup="true"
-            aria-owns="react-select-2-listbox"
             autocapitalize="none"
             autocomplete="off"
             autocorrect="off"