Merge pull request #20779 from mozilla/fix-persisting-dropdown-worktree

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

Author: LZoog

packages/fxa-settings/src/pages/Index/index.test.tsx

@@ -2,7 +2,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import { screen, waitFor } from '@testing-library/react';
+import { act, screen, waitFor } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 import { createMockIndexOAuthNativeIntegration, Subject } from './mocks';
 import { renderWithLocalizationProvider } from 'fxa-react/lib/test-utils/localizationProvider';
@@ -252,4 +252,30 @@ describe('Index page', () => {
       ).toHaveAttribute('data-glean-id', 'email_first_submit');
     });
   });
+
+  describe('email input auto-focus', () => {
+    beforeEach(() => {
+      jest.useFakeTimers();
+    });
+
+    afterEach(() => {
+      jest.useRealTimers();
+    });
+
+    it('does not focus the email input until the defer timeout elapses', () => {
+      renderWithLocalizationProvider(<Subject />);
+
+      expect(screen.getByLabelText('Enter your email')).not.toHaveFocus();
+    });
+
+    it('focuses the email input after the defer timeout elapses', () => {
+      renderWithLocalizationProvider(<Subject />);
+
+      act(() => {
+        jest.advanceTimersByTime(10);
+      });
+
+      expect(screen.getByLabelText('Enter your email')).toHaveFocus();
+    });
+  });
 });

packages/fxa-settings/src/pages/Index/index.tsx

@@ -80,11 +80,22 @@ export const Index = ({
   const legalTerms = integration.getLegalTerms();
 
   const emailEngageEventEmitted = useRef(false);
+  const emailInputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
     GleanMetrics.emailFirst.view();
   }, []);
 
+  // Defer auto-focus once. If the container redirects an already-signed-in user
+  // away, intermittently the browser's email autocomplete dropdown can be shown on
+  // the next page, presumably from a redirect mid-render. See FXA-14009
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      emailInputRef.current?.focus();
+    }, 10);
+    return () => clearTimeout(timer);
+  }, []);
+
   const onSubmit = async ({ email }: IndexFormData) => {
     setIsSubmitting(true);
     try {
@@ -199,7 +210,7 @@ export const Index = ({
             inputMode="email"
             label="Enter your email"
             inputRef={register()}
-            autoFocus
+            inputRefDOM={emailInputRef}
             errorText={tooltipErrorMessage}
             onChange={handleInputChange}
             autoCapitalize="off"