fix(global-search): remove focus on clicked element when virtual focus change

Author: elmarburke

plugins/global-search/src/components/SearchInput.tsx

@@ -7,7 +7,7 @@ import { IconSearch } from "./ui/IconSearch"
 type SearchInputProps = DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>
 
 export function SearchInput({ className, ...props }: SearchInputProps) {
-    const { inputFocusProps, activeId } = useSelection()
+    const { inputFocusProps, activeId, inputRef } = useSelection()
     const activeDescendant = activeId && !isHeader(activeId) ? activeId : undefined
 
     return (
@@ -19,6 +19,7 @@ export function SearchInput({ className, ...props }: SearchInputProps) {
                 className="flex-1 h-[18px] bg-transparent border-none outline-none focus:outline-none focus:ring-0 text-xs p-0 text-primary-light dark:text-primary-dark placeholder:text-tertiary-light dark:placeholder:text-tertiary-dark"
                 placeholder="Search..."
                 autoFocus
+                ref={inputRef}
                 aria-activedescendant={activeDescendant}
                 onKeyDown={e => {
                     inputFocusProps.onKeyDown(e)

plugins/global-search/src/utils/selection/SelectionProvider.tsx

@@ -5,6 +5,7 @@ import { SelectionContext } from "./context"
 export function SelectionProvider({ children }: { children: React.ReactNode }) {
     const [activeId, setActiveId] = useState<string | null>(null)
     const idsRef = useRef<readonly string[]>([])
+    const inputRef = useRef<HTMLInputElement | null>(null)
 
     // scroll to active id
     useLayoutEffect(() => {
@@ -49,6 +50,8 @@ export function SelectionProvider({ children }: { children: React.ReactNode }) {
         (event: React.KeyboardEvent<HTMLElement>) => {
             if (event.key === "ArrowDown" || event.key === "ArrowUp") {
                 event.preventDefault()
+                // Ensure the search input retains focus while navigating, prevents other elements from being focused
+                inputRef.current?.focus()
                 const currentIndex = activeId ? idsRef.current.indexOf(activeId) : null
                 const direction = event.key === "ArrowDown" ? NavigationDirection.Down : NavigationDirection.Up
                 const nextId = findNextSelectable(currentIndex, direction)
@@ -75,6 +78,9 @@ export function SelectionProvider({ children }: { children: React.ReactNode }) {
                 onKeyDown: handleKeyDown,
             }),
             inputFocusProps: { onKeyDown: handleKeyDown },
+            inputRef: (el: HTMLInputElement | null) => {
+                inputRef.current = el
+            },
         }),
         [activeId, setItems, handleKeyDown]
     )

plugins/global-search/src/utils/selection/context.ts

@@ -12,6 +12,8 @@ export interface SelectionContextValue {
     }
     /** Focus props for the input. */
     readonly inputFocusProps: { onKeyDown: KeyboardEventHandler<HTMLElement> }
+    /** Register the search input element so provider can control focus. */
+    readonly inputRef: (el: HTMLInputElement | null) => void
 }
 
 export const SelectionContext = createContext<SelectionContextValue | null>(null)