From e20d5d2ab364c239fb593dd2493f0e3338c72d89 Mon Sep 17 00:00:00 2001
From: Robert Anderson <randerson@duckduckgo.com>
Date: Mon, 14 Jul 2025 15:21:47 +1000
Subject: [PATCH 1/3] Add useBlurWorkaround hook to fix Safari blur issue on
 input

---
 .../app/omnibar/components/SearchForm.js      |  9 +++--
 .../omnibar/components/SearchForm.module.css  |  2 ++
 .../omnibar/components/useBlurWorkaround.js   | 33 +++++++++++++++++++
 special-pages/pages/new-tab/app/utils.js      | 17 ++++++++++
 4 files changed, 58 insertions(+), 3 deletions(-)
 create mode 100644 special-pages/pages/new-tab/app/omnibar/components/useBlurWorkaround.js

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 }) {
             <div class={styles.inputContainer}>
                 <SearchIcon inert />
                 <input
-                    ref={inputRef}
+                    ref={mergedInputRef}
                     type="text"
                     role="combobox"
                     class={styles.input}
diff --git a/special-pages/pages/new-tab/app/omnibar/components/SearchForm.module.css b/special-pages/pages/new-tab/app/omnibar/components/SearchForm.module.css
index c3208341a2..b40a545299 100644
--- a/special-pages/pages/new-tab/app/omnibar/components/SearchForm.module.css
+++ b/special-pages/pages/new-tab/app/omnibar/components/SearchForm.module.css
@@ -11,6 +11,7 @@
 }
 
 .input {
+    --focus-state: 0; /* see useBlurWorkaround.js */
     background: none;
     border: none;
     color: var(--ntp-text-normal);
@@ -19,6 +20,7 @@
     padding: 0;
 
     &:focus {
+        --focus-state: 1; /* see useBlurWorkaround.js */
         outline: none;
     }
 }
diff --git a/special-pages/pages/new-tab/app/omnibar/components/useBlurWorkaround.js b/special-pages/pages/new-tab/app/omnibar/components/useBlurWorkaround.js
new file mode 100644
index 0000000000..a37cc90d59
--- /dev/null
+++ b/special-pages/pages/new-tab/app/omnibar/components/useBlurWorkaround.js
@@ -0,0 +1,33 @@
+import { useEffect, useRef } from 'preact/hooks';
+
+/**
+ * Safari/WebKit doesn't trigger the blur event on an element when focus is
+ * moved to the browser's address bar. This hook works around this issue by
+ * monitoring for when the --focus-state CSS variable, set via the :focus pseudo
+ * selector, changes from 1 to 0, indicating that the element has lost focus.
+ */
+export function useBlurWorkaround() {
+    const ref = useRef(/** @type {HTMLElement|null} */ (null));
+
+    useEffect(() => {
+        const element = ref.current;
+        if (!element) return;
+
+        let lastFocusState = '0';
+        let rafId = null;
+
+        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..af0de3a9d7 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<T>} refs
+ * @returns {import('preact').RefCallback<T>}
+ */
+export function mergeRefs(...refs) {
+    return (value) => {
+        refs.forEach((ref) => {
+            if (typeof ref === 'function') {
+                ref(value);
+            } else if (ref !== null) {
+                ref.current = value;
+            }
+        });
+    };
+}

From 31a87345e289b1c45961f062585c4542a3639fc0 Mon Sep 17 00:00:00 2001
From: Robert Anderson <randerson@duckduckgo.com>
Date: Mon, 14 Jul 2025 15:36:15 +1000
Subject: [PATCH 2/3] Check for undefined ref

---
 special-pages/pages/new-tab/app/utils.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/special-pages/pages/new-tab/app/utils.js b/special-pages/pages/new-tab/app/utils.js
index af0de3a9d7..069451325e 100644
--- a/special-pages/pages/new-tab/app/utils.js
+++ b/special-pages/pages/new-tab/app/utils.js
@@ -108,7 +108,7 @@ export function mergeRefs(...refs) {
         refs.forEach((ref) => {
             if (typeof ref === 'function') {
                 ref(value);
-            } else if (ref !== null) {
+            } else if (ref) {
                 ref.current = value;
             }
         });

From 6bf58e62a41be3717c2accbc001d8a28af37f30c Mon Sep 17 00:00:00 2001
From: Robert Anderson <randerson@duckduckgo.com>
Date: Mon, 14 Jul 2025 15:40:16 +1000
Subject: [PATCH 3/3] Fix type of rafId

---
 .../pages/new-tab/app/omnibar/components/useBlurWorkaround.js   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/special-pages/pages/new-tab/app/omnibar/components/useBlurWorkaround.js b/special-pages/pages/new-tab/app/omnibar/components/useBlurWorkaround.js
index a37cc90d59..dc43868a6b 100644
--- a/special-pages/pages/new-tab/app/omnibar/components/useBlurWorkaround.js
+++ b/special-pages/pages/new-tab/app/omnibar/components/useBlurWorkaround.js
@@ -14,7 +14,7 @@ export function useBlurWorkaround() {
         if (!element) return;
 
         let lastFocusState = '0';
-        let rafId = null;
+        let rafId = 0;
 
         const checkFocusState = () => {
             const currentFocusState = getComputedStyle(element).getPropertyValue('--focus-state').trim();