diff --git a/special-pages/pages/new-tab/app/omnibar/components/SearchForm.js b/special-pages/pages/new-tab/app/omnibar/components/SearchForm.js index dc9d7af625..88913cff42 100644 --- a/special-pages/pages/new-tab/app/omnibar/components/SearchForm.js +++ b/special-pages/pages/new-tab/app/omnibar/components/SearchForm.js @@ -1,5 +1,5 @@ import { h } from 'preact'; -import { useContext, useId } from 'preact/hooks'; +import { useContext, useId, useRef } from 'preact/hooks'; import { SearchIcon } from '../../components/Icons.js'; import { useTypedTranslationWith } from '../../types'; import { OmnibarContext } from './OmnibarProvider'; @@ -7,6 +7,8 @@ import styles from './SearchForm.module.css'; import { SuggestionsList } from './SuggestionsList.js'; import { useSuggestionInput } from './useSuggestionInput.js'; import { useSuggestions } from './useSuggestions'; +import { mergeRefs } from '../../utils.js'; +import { useBlurWorkaround } from './useBlurWorkaround.js'; /** * @typedef {import('../strings.json')} Strings @@ -39,7 +41,8 @@ export function SearchForm({ term, setTerm }) { setTerm, }); - const inputRef = useSuggestionInput(inputBase, inputSuggestion); + const inputRef = useRef(/** @type {HTMLInputElement|null} */ (null)); + const mergedInputRef = mergeRefs(inputRef, useSuggestionInput(inputBase, inputSuggestion), useBlurWorkaround()); /** @type {(event: SubmitEvent) => void} */ const onFormSubmit = (event) => { @@ -55,7 +58,7 @@ export function SearchForm({ term, setTerm }) {
{ + const element = ref.current; + if (!element) return; + + let lastFocusState = '0'; + let rafId = 0; + + const checkFocusState = () => { + const currentFocusState = getComputedStyle(element).getPropertyValue('--focus-state').trim(); + if (lastFocusState === '1' && currentFocusState === '0') { + element.blur(); + } + lastFocusState = currentFocusState; + rafId = requestAnimationFrame(checkFocusState); + }; + + rafId = requestAnimationFrame(checkFocusState); + return () => cancelAnimationFrame(rafId); + }, []); + + return ref; +} diff --git a/special-pages/pages/new-tab/app/utils.js b/special-pages/pages/new-tab/app/utils.js index 21d3a0ab2d..069451325e 100644 --- a/special-pages/pages/new-tab/app/utils.js +++ b/special-pages/pages/new-tab/app/utils.js @@ -97,3 +97,20 @@ export function useOnMiddleClick(ref, handler) { }; }, [ref, handler]); } + +/** + * @template T + * @param {...import('preact').Ref} refs + * @returns {import('preact').RefCallback} + */ +export function mergeRefs(...refs) { + return (value) => { + refs.forEach((ref) => { + if (typeof ref === 'function') { + ref(value); + } else if (ref) { + ref.current = value; + } + }); + }; +}