diff --git a/.changeset/neat-toes-build.md b/.changeset/neat-toes-build.md new file mode 100644 index 00000000000..a4b259ef83e --- /dev/null +++ b/.changeset/neat-toes-build.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +experimental/SelectPanel: Move focus to first item if there is no filter input diff --git a/packages/react/src/drafts/SelectPanel2/SelectPanel.tsx b/packages/react/src/drafts/SelectPanel2/SelectPanel.tsx index 9943e1862f2..7c2a48e0e80 100644 --- a/packages/react/src/drafts/SelectPanel2/SelectPanel.tsx +++ b/packages/react/src/drafts/SelectPanel2/SelectPanel.tsx @@ -191,12 +191,16 @@ const Panel: React.FC = ({ // Autofocus hack: React doesn't support autoFocus for dialog: https://github.com/facebook/react/issues/23301 // tl;dr: react takes over autofocus instead of letting the browser handle it, // but not for dialogs, so we have to do it - React.useEffect(() => { - if (internalOpen) { - const searchInput = document.querySelector('dialog[open] input') as HTMLInputElement | undefined - searchInput?.focus() - } - }, [internalOpen]) + React.useEffect( + function intialFocus() { + if (internalOpen) { + const searchInput = document.querySelector('dialog[open] input') as HTMLInputElement | undefined + if (searchInput) searchInput.focus() + else moveFocusToList() + } + }, + [internalOpen], + ) /* Anchored */ const {position} = useAnchoredPosition(