@openmrs/esm-login-app 8.0.1-pre.3547 → 8.0.1-pre.3552

package/src/login/login.component.tsx

@@ -51,7 +51,10 @@ const Login: React.FC = () => {
   useEffect(() => {
     if (showPasswordOnSeparateScreen) {
       if (showPasswordField) {
-        passwordInputRef.current?.focus();
+        // Only focus password input if it's empty (to preserve browser autofilled values)
+        if (!passwordInputRef.current?.value) {
+          passwordInputRef.current?.focus();
+        }
       } else {
         usernameInputRef.current?.focus();
       }
@@ -157,6 +160,8 @@ const Login: React.FC = () => {
               <TextInput
                 id="username"
                 type="text"
+                name="username"
+                autoComplete="username"
                 labelText={t('username', 'Username')}
                 value={username}
                 onChange={changeUsername}
@@ -165,19 +170,25 @@ const Login: React.FC = () => {
                 autoFocus
               />
               {showPasswordOnSeparateScreen ? (
-                showPasswordField ? (
-                  <>
+                <>
+                  {/* Password input is always in DOM for browser autofill support, but visually hidden until username step is complete */}
+                  <div className={showPasswordField ? undefined : styles.hiddenPasswordField}>
                     <PasswordInput
                       id="password"
                       labelText={t('password', 'Password')}
                       name="password"
+                      autoComplete="current-password"
                       onChange={changePassword}
                       ref={passwordInputRef}
-                      required
+                      required={showPasswordField}
                       value={password}
                       showPasswordLabel={t('showPassword', 'Show password')}
                       invalidText={t('validValueRequired', 'A valid value is required')}
+                      aria-hidden={!showPasswordField}
+                      tabIndex={showPasswordField ? 0 : -1}
                     />
+                  </div>
+                  {showPasswordField ? (
                     <Button
                       type="submit"
                       className={styles.continueButton}
@@ -191,24 +202,25 @@ const Login: React.FC = () => {
                         t('login', 'Log in')
                       )}
                     </Button>
-                  </>
-                ) : (
-                  <Button
-                    className={styles.continueButton}
-                    renderIcon={(props) => <ArrowRightIcon size={24} {...props} />}
-                    iconDescription="Continue to password"
-                    onClick={continueLogin}
-                    disabled={!isLoginEnabled}
-                  >
-                    {t('continue', 'Continue')}
-                  </Button>
-                )
+                  ) : (
+                    <Button
+                      className={styles.continueButton}
+                      renderIcon={(props) => <ArrowRightIcon size={24} {...props} />}
+                      iconDescription="Continue to password"
+                      onClick={continueLogin}
+                      disabled={!isLoginEnabled}
+                    >
+                      {t('continue', 'Continue')}
+                    </Button>
+                  )}
+                </>
               ) : (
                 <>
                   <PasswordInput
                     id="password"
                     labelText={t('password', 'Password')}
                     name="password"
+                    autoComplete="current-password"
                     onChange={changePassword}
                     ref={passwordInputRef}
                     required

package/src/login/login.scss

@@ -156,3 +156,14 @@
   bottom: 100%;
   left: 0;
 }
+
+// Hidden password field for browser autofill support
+// Uses visibility:hidden instead of display:none to keep the input in the DOM
+// This allows browsers to autofill both username and password credentials
+.hiddenPasswordField {
+  visibility: hidden;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  pointer-events: none;
+}

package/src/login/login.test.tsx

@@ -172,7 +172,7 @@ describe('Login', () => {
     expect(loginButton).toBeInTheDocument();
   });
 
-  it('should not render the password field when the showPasswordOnSeparateScreen config is true (default)', async () => {
+  it('should render password field hidden but present for autofill when showPasswordOnSeparateScreen config is true (default)', async () => {
     mockUseConfig.mockReturnValue({
       ...mockConfig,
     });
@@ -187,12 +187,14 @@ describe('Login', () => {
 
     const usernameInput = screen.queryByRole('textbox', { name: /username/i });
     const continueButton = screen.queryByRole('button', { name: /Continue/i });
-    const passwordInput = screen.queryByLabelText(/password/i);
+    const passwordInput = screen.queryByLabelText(/^password$/i);
     const loginButton = screen.queryByRole('button', { name: /log in/i });
 
     expect(usernameInput).toBeInTheDocument();
     expect(continueButton).toBeInTheDocument();
-    expect(passwordInput).not.toBeInTheDocument();
+    expect(passwordInput).toBeInTheDocument();
+    expect(passwordInput).toHaveAttribute('aria-hidden', 'true');
+    expect(passwordInput).toHaveAttribute('tabIndex', '-1');
     expect(loginButton).not.toBeInTheDocument();
   });
 
@@ -283,4 +285,31 @@ describe('Login', () => {
 
     expect(usernameInput).toHaveFocus();
   });
+
+  it('should make password input visible and accessible after continuing from username step', async () => {
+    const user = userEvent.setup();
+    mockUseConfig.mockReturnValue({
+      ...mockConfig,
+    });
+
+    renderWithRouter(
+      Login,
+      {},
+      {
+        route: '/login',
+      },
+    );
+
+    const usernameInput = screen.getByRole('textbox', { name: /username/i });
+    const continueButton = screen.getByRole('button', { name: /Continue/i });
+
+    await user.type(usernameInput, 'testuser');
+    await user.click(continueButton);
+
+    const passwordInput = screen.getByLabelText(/^password$/i);
+
+    // Password should now be visible and accessible
+    expect(passwordInput).toHaveAttribute('aria-hidden', 'false');
+    expect(passwordInput).toHaveAttribute('tabIndex', '0');
+  });
 });