Skip to content

fix(UI): Add short delay before auto focus on email first#20779

Merged
LZoog merged 1 commit into
mainfrom
fix-persisting-dropdown-worktree
Jun 23, 2026
Merged

fix(UI): Add short delay before auto focus on email first#20779
LZoog merged 1 commit into
mainfrom
fix-persisting-dropdown-worktree

Conversation

@LZoog

@LZoog LZoog commented Jun 22, 2026

Copy link
Copy Markdown
Contributor

Because:

  • Users are sometimes seeing what seems to be an orphaned dropdown email list

This commit:

  • Adds a very short settimeout on autofocus of that input, to prevent the dropdown being orphaned if the input unmounts mid-render

closes FXA-14009


I tested this locally and it still autofocuses as expected, and notice no perceptible delay.

0ms might work here just to move off the syncronous autoFocus, but 10ms felt fine just to get past the render. 50ms or 100ms would probably be fine as well but 100ms especially seems like it could be at least slightly perceptible but if you have an opinion on a different value I'm all ears, 10ms seems fine to me.

Copilot AI review requested due to automatic review settings June 22, 2026 17:48
@LZoog LZoog requested a review from a team as a code owner June 22, 2026 17:48

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Pull request overview

This PR addresses an intermittent UI issue on the email-first Settings index page where the browser’s email autocomplete dropdown can appear “orphaned” on the subsequent page if a redirect/unmount happens mid-render, by deferring the email input autofocus slightly.

Changes:

  • Replaces synchronous autoFocus with a DOM ref + deferred focus via setTimeout.
  • Adds a dedicated emailInputRef passed down to InputText via inputRefDOM.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread packages/fxa-settings/src/pages/Index/index.tsx Outdated
Comment thread packages/fxa-settings/src/pages/Index/index.tsx Outdated
Comment on lines +91 to +94
useEffect(() => {
const timer = setTimeout(() => {
emailInputRef.current?.focus();
}, 10);

@vbudhram vbudhram left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

@LZoog We should add the [] to deps, other than that I think we can try this.

Because:
* Users are sometimes seeing what seems to be an orphaned dropdown email list

This commit:
* Adds a very short settimeout on autofocus of that input, to prevent the dropdown being orphaned if the input unmounts mid-render

closes FXA-14009
@LZoog LZoog force-pushed the fix-persisting-dropdown-worktree branch from 16596d5 to c4bfd4b Compare June 23, 2026 18:22
@LZoog

LZoog commented Jun 23, 2026

Copy link
Copy Markdown
Contributor Author

The functional test failures are known and unrelated.

@LZoog LZoog merged commit f4f78e1 into main Jun 23, 2026
19 of 21 checks passed
@LZoog LZoog deleted the fix-persisting-dropdown-worktree branch June 23, 2026 20:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants