From 685be24dfe49732319530dddf5fa478379dd830c Mon Sep 17 00:00:00 2001
From: Oskar <oskar@dataviruset.com>
Date: Wed, 4 Mar 2026 15:50:16 +0800
Subject: [PATCH] fix(login): disable auto-capitalization, auto-correct and
 spell checking for usernames (#11129)

# Which Problems Are Solved

This PR introduces several HTML attributes to the username/ID input
field to **prevent unwanted automatic capitalization and correction** on
mobile devices (iOS and Android).

Specifically, this addresses the common issue where a mobile keyboard
defaults to an uppercase letter for the first character, even when the
input (like a username or email) should be lowercase.

# How the Problems Are Solved

The following attributes have been added to the `<input>` field:

| Attribute | Value | Purpose |
| :--- | :--- | :--- |
| `autoCapitalize` | `none` | **Crucial fix:** Prevents the virtual
keyboard from capitalizing the first letter. |
| `autoCorrect` | `off` | Prevents the operating system from
auto-correcting input (e.g., changing "teh" to "the"). |
| `spellCheck` | `false` | Disables the red squiggly lines for
spell-checking. |

# Additional Changes

None.

Previously:

~Introduces a default `Content-Type` request header in the `.env` file
to increase compatibility for developing `zitadel-login` and call a
non-local Zitadel API. The `Host` header is also added as a
commented-out reference so developers will be reminded to set this one
too. This is needed for supporting calls to a Zitadel deployed behind an
AWS ALB, for example.~
https://github.com/zitadel/zitadel-charts/pull/460

# Additional Context

This attribute was already present:

| Attribute | Value | Purpose |
| :--- | :--- | :--- |
| `autoComplete` | `username` | Provides a semantic hint to password
managers to correctly suggest and fill stored usernames. |

## Rationale and References (MDN Web Docs)

| Attribute | Why we use it | Reference Link |
| :--- | :--- | :--- |
| **`autoCapitalize="none"`** | Overrides default OS sentence
capitalization behavior. | [MDN:
autocapitalize](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/autocapitalize)
|
| **`autoCorrect="off"`** | Essential for case-sensitive or specific
identifiers where correction must be disabled (primarily iOS). | [MDN:
autocorrect](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/autocorrect)
|
| **`spellCheck="false"`** | Usernames are not dictionary words, so
spell-checking is distracting/irrelevant. | [MDN:
spellcheck](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/spellcheck)
|
| **`autoComplete="username"`** | Modern standard for indicating a login
field, supporting password managers. | [MDN:
autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete)
|

## Browser Safety Concern

This change is **safe**. These attributes act as "hints" to the browser
and OS. If a particular older browser does not support one of the
attributes, it will simply ignore it and revert to its default behavior,
introducing **no errors** or breaking changes. The combination used is
considered best practice for secure and predictable input fields.

- Discussion #11124

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Ramon <mail@conblem.me>
---
 apps/login/src/components/ldap-username-password-form.tsx | 3 +++
 apps/login/src/components/username-form.tsx               | 3 +++
 2 files changed, 6 insertions(+)

diff --git a/apps/login/src/components/ldap-username-password-form.tsx b/apps/login/src/components/ldap-username-password-form.tsx
index 342ae4b63..f6f75f58a 100644
--- a/apps/login/src/components/ldap-username-password-form.tsx
+++ b/apps/login/src/components/ldap-username-password-form.tsx
@@ -68,6 +68,9 @@ export function LDAPUsernamePasswordForm({ idpId, link }: Props) {
       <TextInput
         type="text"
         autoComplete="username"
+        autoCapitalize="none"
+        autoCorrect="off"
+        spellCheck={false}
         autoFocus
         {...register("loginName", { required: t("required.username") })}
         label={t("labels.username")}
diff --git a/apps/login/src/components/username-form.tsx b/apps/login/src/components/username-form.tsx
index 77dad6577..110b67332 100644
--- a/apps/login/src/components/username-form.tsx
+++ b/apps/login/src/components/username-form.tsx
@@ -101,6 +101,9 @@ export function UsernameForm({
           <TextInput
             type="text"
             autoComplete="username"
+            autoCapitalize="none"
+            autoCorrect="off"
+            spellCheck={false}
             autoFocus
             {...register("loginName", { required: t("required.loginName") })}
             label={inputLabel}