Improve UX for email fields on mobile (#36218)

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

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"

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

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