Skip to content

NTP: Move focus to input when switching Omnibar tabs #1823

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 1 commit into from
Jul 15, 2025
Merged

NTP: Move focus to input when switching Omnibar tabs #1823

merged 1 commit into from
Jul 15, 2025

Conversation

noisysocks
Copy link
Contributor

Asana Task/Github Issue: https://app.asana.com/1/137249556945/project/1209121419454298/task/1210785568574517?focus=true

Description

Moves focus to the input or textarea when switching to the Search or Duck.ai tabs.

Testing Steps

  1. Go to https://deploy-preview-1823--content-scope-scripts.netlify.app/build/pages/new-tab/?omnibar=true in Safari or DuckDuckGo on macOS.
  2. Search input should not be focused.
  3. Toggle between the Search and Duck.ai tabs. Focus should move to the Search input or Duck.ai textarea.

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

@noisysocks noisysocks added the enhancement New feature or request label Jul 15, 2025
@noisysocks noisysocks requested review from shakyShane, mgurgel and a team as code owners July 15, 2025 03:17
@netlify Netlify
Copy link

netlify bot commented Jul 15, 2025 •
edited
Loading

✅ Deploy Preview for content-scope-scripts ready!

Name Link
🔨 Latest commit 9245641
🔍 Latest deploy log https://app.netlify.com/projects/content-scope-scripts/deploys/68762da119dc000008085086
😎 Deploy Preview https://deploy-preview-1823--content-scope-scripts.netlify.app
📱 Preview on mobile
Toggle QR Code...

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 GitHub Actions
Copy link

github-actions bot commented Jul 15, 2025 •
edited
Loading

Temporary Branch Update

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

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

@github-actions GitHub Actions
Copy link

github-actions bot commented Jul 15, 2025 •
edited
Loading

[Beta] Generated file diff

Time updated: Tue, 15 Jul 2025 10:30:46 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

cursor[bot]

This comment was marked as outdated.

Sign in to view

shakyShane
shakyShane requested changes Jul 15, 2025
View reviewed changes
Copy link
Contributor

@shakyShane shakyShane left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@noisysocks I tried this, one problem now (sorry!) is that the input steals focus from the address bar, perhaps the rule needs to be, auto-focus when there's some input.

Please go back to native/design folks to get some clarity on this one, I'm not confident on the expectations

@noisysocks noisysocks force-pushed the randerson/focus-omnibar-input-after-switching-tab branch from b537cbd to 9245641 Compare July 15, 2025 10:29
cursor[bot]
cursor bot reviewed Jul 15, 2025
View reviewed changes
Copy link

@cursor cursor bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bug: AutoFocus State Persistence Causes Input Issues

The autoFocus state is set to true when switching tabs but is never reset to false. This leads to two unintended behaviors:

  1. Inputs are auto-focused after form submissions (due to component remounting via resetKey), even when the user didn't switch tabs.
  2. Subsequent tab switches fail to auto-focus inputs because the autoFocus prop's value remains true, preventing the focus effect from re-triggering.

special-pages/pages/new-tab/app/omnibar/components/Omnibar.js#L28-L60

content-scope-scripts/special-pages/pages/new-tab/app/omnibar/components/Omnibar.js

Lines 28 to 60 in 9245641

const [resetKey, setResetKey] = useState(0);
const [autoFocus, setAutoFocus] = useState(false);
const { openSuggestion, submitSearch, submitChat } = useContext(OmnibarContext);
const resetForm = () => {
setQuery('');
setResetKey((prev) => prev + 1);
};
/** @type {(params: {suggestion: Suggestion, target: OpenTarget}) => void} */
const handleOpenSuggestion = (params) => {
openSuggestion(params);
resetForm();
};
/** @type {(params: {term: string, target: OpenTarget}) => void} */
const handleSubmitSearch = (params) => {
submitSearch(params);
resetForm();
};
/** @type {(params: {chat: string, target: OpenTarget}) => void} */
const handleSubmitChat = (params) => {
submitChat(params);
resetForm();
};
/** @type {(mode: OmnibarConfig['mode']) => void} */
const handleChangeMode = (nextMode) => {
setAutoFocus(true);
setMode(nextMode);
};

Fix in Cursor • Fix in Web

Was this report helpful? Give feedback by reacting with 👍 or 👎

@noisysocks noisysocks merged commit a523a46 into main Jul 15, 2025
18 checks passed
@noisysocks noisysocks deleted the randerson/focus-omnibar-input-after-switching-tab branch July 15, 2025 10:37
mallexxx pushed a commit that referenced this pull request Jul 17, 2025
@noisysocks
Move focus to input when switching Omnibar tabs (#1823)
b6bb8b8
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@cursor cursor[bot] cursor[bot] left review comments

@shakyShane shakyShane shakyShane approved these changes

@mgurgel mgurgel Awaiting requested review from mgurgel mgurgel is a code owner

Assignees
No one assigned
Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@noisysocks @shakyShane