From efcab3e72d38562c0a2e42393dd4f3662645cf02 Mon Sep 17 00:00:00 2001
From: jacobshandling <61553566+jacobshandling@users.noreply.github.com>
Date: Tue, 25 Nov 2025 09:26:15 -0800
Subject: [PATCH] Improve UX for email fields on mobile (#36218)

---
 .../ForgotPasswordForm/ForgotPasswordForm.jsx      |  8 +++++++-
 .../RegistrationForm/AdminDetails/AdminDetails.jsx | 14 ++++++++++++--
 .../components/IntegrationForm/IntegrationForm.tsx |  2 ++
 .../components/UserForm/UserForm.tsx               |  1 +
 4 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/frontend/components/forms/ForgotPasswordForm/ForgotPasswordForm.jsx b/frontend/components/forms/ForgotPasswordForm/ForgotPasswordForm.jsx
index c98ed92bc0..c565de4a49 100644
--- a/frontend/components/forms/ForgotPasswordForm/ForgotPasswordForm.jsx
+++ b/frontend/components/forms/ForgotPasswordForm/ForgotPasswordForm.jsx
@@ -24,7 +24,12 @@ class ForgotPasswordForm extends Component {
     const { baseError, fields, handleSubmit, isLoading } = this.props;
 
     return (
-      <form onSubmit={handleSubmit} className={baseClass} autoComplete="off">
+      <form
+        onSubmit={handleSubmit}
+        className={baseClass}
+        autoComplete="off"
+        noValidate
+      >
         {baseError && <div className="form__base-error">{baseError}</div>}
         <p>
           Enter your email below to receive an email with instructions to reset
@@ -35,6 +40,7 @@ class ForgotPasswordForm extends Component {
           autofocus
           label="Email"
           placeholder="Email"
+          type="email"
         />
         <div className="button-wrap">
           <Button
diff --git a/frontend/components/forms/RegistrationForm/AdminDetails/AdminDetails.jsx b/frontend/components/forms/RegistrationForm/AdminDetails/AdminDetails.jsx
index 37db3eabca..66877b6abe 100644
--- a/frontend/components/forms/RegistrationForm/AdminDetails/AdminDetails.jsx
+++ b/frontend/components/forms/RegistrationForm/AdminDetails/AdminDetails.jsx
@@ -42,7 +42,12 @@ class AdminDetails extends Component {
     const tabIndex = currentPage ? 0 : -1;
 
     return (
-      <form onSubmit={handleSubmit} className={className} autoComplete="off">
+      <form
+        onSubmit={handleSubmit}
+        className={className}
+        autoComplete="off"
+        noValidate
+      >
         <p>Additional admins can be designated within the Fleet app.</p>
         <InputField
           {...fields.name}
@@ -56,7 +61,12 @@ class AdminDetails extends Component {
             maxLength: "80",
           }}
         />
-        <InputField {...fields.email} label="Email" tabIndex={tabIndex} />
+        <InputField
+          {...fields.email}
+          label="Email"
+          tabIndex={tabIndex}
+          type="email"
+        />
         <InputField
           {...fields.password}
           label="Password"
diff --git a/frontend/pages/admin/IntegrationsPage/cards/Integrations/components/IntegrationForm/IntegrationForm.tsx b/frontend/pages/admin/IntegrationsPage/cards/Integrations/components/IntegrationForm/IntegrationForm.tsx
index 1505d0e927..94655c0291 100644
--- a/frontend/pages/admin/IntegrationsPage/cards/Integrations/components/IntegrationForm/IntegrationForm.tsx
+++ b/frontend/pages/admin/IntegrationsPage/cards/Integrations/components/IntegrationForm/IntegrationForm.tsx
@@ -175,6 +175,7 @@ const IntegrationForm = ({
           className={`${baseClass}__form`}
           onSubmit={onFormSubmit}
           autoComplete="off"
+          noValidate
         >
           <InputField
             autofocus
@@ -211,6 +212,7 @@ const IntegrationForm = ({
               parseTarget
               value={email}
               disabled={gitOpsModeEnabled}
+              type="email"
             />
           )}
           <InputField
diff --git a/frontend/pages/admin/UserManagementPage/components/UserForm/UserForm.tsx b/frontend/pages/admin/UserManagementPage/components/UserForm/UserForm.tsx
index a40f337942..7995e62ece 100644
--- a/frontend/pages/admin/UserManagementPage/components/UserForm/UserForm.tsx
+++ b/frontend/pages/admin/UserManagementPage/components/UserForm/UserForm.tsx
@@ -552,6 +552,7 @@ const UserForm = ({
         label="Email"
         error={formErrors.email}
         name="email"
+        type="email"
         onChange={onInputChange}
         onBlur={onInputBlur}
         parseTarget