diff --git a/.changeset/curly-mice-nail.md b/.changeset/curly-mice-nail.md new file mode 100644 index 0000000000..418852a8ae --- /dev/null +++ b/.changeset/curly-mice-nail.md @@ -0,0 +1,5 @@ +--- +'react-select': minor +--- + +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 index 5814ee871d..afc2effc04 100644 --- 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 index cac1b28d31..33600fcefb 100644 --- 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`] = ` > snapshot 1`] = ` >