NTP: Add useBlurWorkaround hook to fix WebKit blur issue in Omnibar

[noisysocks]

Asana Task/Github Issue: https://app.asana.com/1/137249556945/task/1210784594537119

Description

Fixes an issue in the Omnibar widget where, in the macOS browser, moving focus to the address bar doesn’t close the suggestions list.

The problem is that Safari/WebKit doesn’t trigger a blur on input elements when focus is moved to the address bar.

I noticed that Safari/WebKit does correctly remove :focus styling, though, so my “clever” workaround is to detect when :focus is removed by setting a CSS variable in the :focus style and then polling for changes to this.

Testing Steps

1. Go to https://deploy-preview-1820--content-scope-scripts.netlify.app/build/pages/new-tab/?omnibar=true in Safari or DuckDuckGo on macOS.
2. Type “pizza” into the Search form so that suggestions list opens.
3. Click on the browser address bar. Suggestions list should be dismissed.

Checklist

Please tick all that apply:

• I have tested this change locally
• I have tested this change locally in all supported browsers
• This change will be visible to users
• I have added automated tests that cover this change
• I have ensured the change is gated by config
• This change was covered by a ship review
• This change was covered by a tech design
• Any dependent config has been merged

[netlify]

✅ Deploy Preview for content-scope-scripts ready!

Name	Link
🔨 Latest commit	6bf58e6
🔍 Latest deploy log	https://app.netlify.com/projects/content-scope-scripts/deploys/6874984740affc00083ce44b
😎 Deploy Preview	https://deploy-preview-1820--content-scope-scripts.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[github-actions]

Temporary Branch Update

The temporary branch has been updated with the latest changes. Below are the details:

• Branch Name: pr-releases/pr-1820
• Commit Hash: 0c9936c95d78cf773f4e8fd2268a263d7e7396fe
• Last Updated: July 14, 2025 at 5:40:53 AM UTC
• Install Command: npm i github:duckduckgo/content-scope-scripts#0c9936c95d78cf773f4e8fd2268a263d7e7396fe

Please use the above install command to update to the latest version.

[github-actions]

[Beta] Generated file diff

Time updated: Mon, 14 Jul 2025 05:41:19 GMT

Integration

    - integration/pages/new-tab/dist/index.css

• integration/pages/new-tab/dist/index.js

File has changed

Windows

    - windows/pages/new-tab/dist/index.css

• windows/pages/new-tab/dist/index.js

File has changed

Apple

    - dist/pages/new-tab/dist/index.css

• dist/pages/new-tab/dist/index.js

File has changed

[noisysocks]

Oh, weird, the blur event fires if it’s added using addEventListener. I’m going to keep working on this.