Replace text inputs with KeycloakTextInput (#2413)

src/authentication/components/ExecutionConfigModal.tsx

@@ -10,7 +10,6 @@ import {
   FormGroup,
   Modal,
   ModalVariant,
-  TextInput,
   ValidatedOptions,
 } from "@patternfly/react-core";
 import { CogIcon, TrashIcon } from "@patternfly/react-icons";
@@ -23,6 +22,7 @@ import { useAdminClient, useFetch } from "../../context/auth/AdminClient";
 import { useAlerts } from "../../components/alert/Alerts";
 import { HelpItem } from "../../components/help-enabler/HelpItem";
 import { DynamicComponents } from "../../components/dynamic/DynamicComponents";
+import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 
 type ExecutionConfigModalForm = {
   alias: string;
@@ -155,7 +155,7 @@ export const ExecutionConfigModal = ({
                 />
               }
             >
-              <TextInput
+              <KeycloakTextInput
                 isReadOnly={!!config}
                 type="text"
                 id="alias"

src/authentication/components/modals/AddSubFlowModal.tsx

@@ -11,12 +11,12 @@ import {
   Select,
   SelectOption,
   SelectVariant,
-  TextInput,
   ValidatedOptions,
 } from "@patternfly/react-core";
 
 import type { AuthenticationProviderRepresentation } from "@keycloak/keycloak-admin-client/lib/defs/authenticatorConfigRepresentation";
 import { HelpItem } from "../../../components/help-enabler/HelpItem";
+import { KeycloakTextInput } from "../../../components/keycloak-text-input/KeycloakTextInput";
 import { useAdminClient, useFetch } from "../../../context/auth/AdminClient";
 
 type AddSubFlowProps = {
@@ -100,7 +100,7 @@ export const AddSubFlowModal = ({
             <HelpItem helpText="authentication-help:name" fieldLabelId="name" />
           }
         >
-          <TextInput
+          <KeycloakTextInput
             type="text"
             id="name"
             name="name"
@@ -121,7 +121,7 @@ export const AddSubFlowModal = ({
             />
           }
         >
-          <TextInput
+          <KeycloakTextInput
             type="text"
             id="description"
             name="description"

src/authentication/form/NameDescription.tsx

@@ -1,14 +1,10 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { useFormContext } from "react-hook-form";
-import {
+import { FormGroup, TextArea, ValidatedOptions } from "@patternfly/react-core";
-  FormGroup,
-  TextArea,
-  TextInput,
-  ValidatedOptions,
-} from "@patternfly/react-core";
 
 import { HelpItem } from "../../components/help-enabler/HelpItem";
+import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 
 export const NameDescription = () => {
   const { t } = useTranslation("authentication");
@@ -31,7 +27,7 @@ export const NameDescription = () => {
           <HelpItem helpText="authentication-help:name" fieldLabelId="name" />
         }
       >
-        <TextInput
+        <KeycloakTextInput
           type="text"
           id="kc-name"
           name="alias"

src/authentication/policies/OtpPolicy.tsx

@@ -11,7 +11,6 @@ import {
   NumberInput,
   ActionGroup,
   Button,
-  TextInput,
   ButtonVariant,
   AlertVariant,
 } from "@patternfly/react-core";
@@ -21,6 +20,7 @@ import { FormAccess } from "../../components/form-access/FormAccess";
 import { HelpItem } from "../../components/help-enabler/HelpItem";
 import useToggle from "../../utils/useToggle";
 import { TimeSelector } from "../../components/time-selector/TimeSelector";
+import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 import { useAdminClient } from "../../context/auth/AdminClient";
 import { useRealm } from "../../context/realm-context/RealmContext";
 import { useAlerts } from "../../components/alert/Alerts";
@@ -311,7 +311,7 @@ export const OtpPolicy = ({ realm, realmUpdated }: OtpPolicyProps) => {
             />
           }
         >
-          <TextInput
+          <KeycloakTextInput
             id="supportedActions"
             name="otpSupportedApplications"
             ref={register({

src/authentication/policies/PolicyRow.tsx

@@ -8,13 +8,13 @@ import {
   Split,
   SplitItem,
   Switch,
-  TextInput,
   ValidatedOptions,
 } from "@patternfly/react-core";
 import { MinusCircleIcon } from "@patternfly/react-icons";
-
 import type PasswordPolicyTypeRepresentation from "@keycloak/keycloak-admin-client/lib/defs/passwordPolicyTypeRepresentation";
 
+import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
+
 import "./policy-row.css";
 
 type PolicyRowProps = {
@@ -45,7 +45,7 @@ export const PolicyRow = ({
       <Split>
         <SplitItem isFilled>
           {configType && configType !== "int" && (
-            <TextInput
+            <KeycloakTextInput
               id={id}
               data-testid={id}
               ref={register({ required: true })}

src/authentication/policies/WebauthnPolicy.tsx

@@ -20,7 +20,6 @@ import {
   Switch,
   Text,
   TextContent,
-  TextInput,
 } from "@patternfly/react-core";
 import { QuestionCircleIcon } from "@patternfly/react-icons";
 
@@ -34,6 +33,7 @@ import { useHelp } from "../../components/help-enabler/HelpHeader";
 import { useAlerts } from "../../components/alert/Alerts";
 import { TimeSelector } from "../../components/time-selector/TimeSelector";
 import { MultiLineInput } from "../../components/multi-line-input/MultiLineInput";
+import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 
 import "./webauthn-policy.css";
 
@@ -222,7 +222,7 @@ export const WebauthnPolicy = ({
             />
           }
         >
-          <TextInput
+          <KeycloakTextInput
             ref={register({ required: true })}
             name={`${namePrefix}RpEntityName`}
             id="webAuthnPolicyRpEntityName"
@@ -247,7 +247,7 @@ export const WebauthnPolicy = ({
             }
             fieldId="webAuthnPolicyRpId"
           >
-            <TextInput
+            <KeycloakTextInput
               id="webAuthnPolicyRpId"
               name={`${namePrefix}RpId`}
               ref={register()}

src/client-scopes/details/MappingDetails.tsx

@@ -10,7 +10,6 @@ import {
   DropdownItem,
   FormGroup,
   PageSection,
-  TextInput,
   ValidatedOptions,
 } from "@patternfly/react-core";
 import type ProtocolMapperRepresentation from "@keycloak/keycloak-admin-client/lib/defs/protocolMapperRepresentation";
@@ -28,6 +27,7 @@ import { useRealm } from "../../context/realm-context/RealmContext";
 import { MapperParams, MapperRoute } from "../routes/Mapper";
 import { toClientScope } from "../routes/ClientScope";
 import { DynamicComponents } from "../../components/dynamic/DynamicComponents";
+import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 
 import "./mapping-details.css";
 
@@ -202,7 +202,7 @@ export default function MappingDetails() {
           className="keycloak__client-scope-mapping-details__form"
         >
           <FormGroup label={t("common:mapperType")} fieldId="mapperType">
-            <TextInput
+            <KeycloakTextInput
               type="text"
               id="mapperType"
               name="mapperType"
@@ -225,7 +225,7 @@ export default function MappingDetails() {
             }
             helperTextInvalid={t("common:required")}
           >
-            <TextInput
+            <KeycloakTextInput
               ref={register({ required: true })}
               type="text"
               id="name"

src/client-scopes/details/ScopeForm.tsx

@@ -5,7 +5,6 @@ import { Controller, useForm, useWatch } from "react-hook-form";
 import {
   FormGroup,
   ValidatedOptions,
-  TextInput,
   Select,
   SelectVariant,
   SelectOption,
@@ -28,6 +27,7 @@ import { useRealm } from "../../context/realm-context/RealmContext";
 import { getProtocolName } from "../../clients/utils";
 import { toClientScopes } from "../routes/ClientScopes";
 import { FormAccess } from "../../components/form-access/FormAccess";
+import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 
 type ScopeFormProps = {
   clientScope: ClientScopeRepresentation;
@@ -82,7 +82,7 @@ export const ScopeForm = ({ clientScope, save }: ScopeFormProps) => {
         }
         helperTextInvalid={t("common:required")}
       >
-        <TextInput
+        <KeycloakTextInput
           ref={register({
             required: true,
             validate: (value: string) =>
@@ -110,7 +110,7 @@ export const ScopeForm = ({ clientScope, save }: ScopeFormProps) => {
         }
         helperTextInvalid={t("common:maxLength", { length: 255 })}
       >
-        <TextInput
+        <KeycloakTextInput
           ref={register({
             maxLength: 255,
           })}
@@ -285,7 +285,7 @@ export const ScopeForm = ({ clientScope, save }: ScopeFormProps) => {
           defaultValue=""
           control={control}
           render={({ onChange, value }) => (
-            <TextInput
+            <KeycloakTextInput
               type="number"
               value={value}
               data-testid="displayOrder"

src/clients/AdvancedTab.tsx

@@ -10,7 +10,6 @@ import {
   Split,
   SplitItem,
   Text,
-  TextInput,
   ToolbarItem,
   Tooltip,
 } from "@patternfly/react-core";
@@ -29,6 +28,7 @@ import { ListEmptyState } from "../components/list-empty-state/ListEmptyState";
 import { ScrollForm } from "../components/scroll-form/ScrollForm";
 import { KeycloakDataTable } from "../components/table-toolbar/KeycloakDataTable";
 import { TimeSelector } from "../components/time-selector/TimeSelector";
+import { KeycloakTextInput } from "../components/keycloak-text-input/KeycloakTextInput";
 import { useAdminClient } from "../context/auth/AdminClient";
 import { useRealm } from "../context/realm-context/RealmContext";
 import { convertToFormValues, toUpperCase } from "../util";
@@ -209,7 +209,7 @@ export const AdvancedTab = ({
                 }
               >
                 <InputGroup>
-                  <TextInput
+                  <KeycloakTextInput
                     type="text"
                     id="kc-not-before"
                     name="notBefore"

src/clients/ClientDescription.tsx

@@ -5,13 +5,13 @@ import {
   FormGroup,
   Switch,
   TextArea,
-  TextInput,
   ValidatedOptions,
 } from "@patternfly/react-core";
 
 import type ClientRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientRepresentation";
 import { HelpItem } from "../components/help-enabler/HelpItem";
 import { FormAccess } from "../components/form-access/FormAccess";
+import { KeycloakTextInput } from "../components/keycloak-text-input/KeycloakTextInput";
 
 type ClientDescriptionProps = {
   protocol?: string;
@@ -38,7 +38,7 @@ export const ClientDescription = ({ protocol }: ClientDescriptionProps) => {
         }
         isRequired
       >
-        <TextInput
+        <KeycloakTextInput
           ref={register({ required: true })}
           type="text"
           id="kc-client-id"
@@ -55,7 +55,12 @@ export const ClientDescription = ({ protocol }: ClientDescriptionProps) => {
         label={t("common:name")}
         fieldId="kc-name"
       >
-        <TextInput ref={register()} type="text" id="kc-name" name="name" />
+        <KeycloakTextInput
+          ref={register()}
+          type="text"
+          id="kc-name"
+          name="name"
+        />
       </FormGroup>
       <FormGroup
         labelIcon={

src/clients/ClientSettings.tsx

@@ -3,7 +3,6 @@ import React, { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
   FormGroup,
-  TextInput,
   Form,
   Switch,
   TextArea,
@@ -20,6 +19,7 @@ import { CapabilityConfig } from "./add/CapabilityConfig";
 import { MultiLineInput } from "../components/multi-line-input/MultiLineInput";
 import { FormAccess } from "../components/form-access/FormAccess";
 import { HelpItem } from "../components/help-enabler/HelpItem";
+import { KeycloakTextInput } from "../components/keycloak-text-input/KeycloakTextInput";
 import { useServerInfo } from "../context/server-info/ServerInfoProvider";
 import { SaveReset } from "./advanced/SaveReset";
 import { SamlConfig } from "./add/SamlConfig";
@@ -100,7 +100,7 @@ export const ClientSettings = ({
                 />
               }
             >
-              <TextInput
+              <KeycloakTextInput
                 type="text"
                 id="kc-root-url"
                 name="rootUrl"
@@ -117,7 +117,7 @@ export const ClientSettings = ({
                 />
               }
             >
-              <TextInput
+              <KeycloakTextInput
                 type="text"
                 id="kc-home-url"
                 name="baseUrl"
@@ -158,7 +158,7 @@ export const ClientSettings = ({
                     })
                   }
                 >
-                  <TextInput
+                  <KeycloakTextInput
                     type="text"
                     id="idpInitiatedSsoUrlName"
                     name="attributes.saml_idp_initiated_sso_url_name"
@@ -175,7 +175,7 @@ export const ClientSettings = ({
                     />
                   }
                 >
-                  <TextInput
+                  <KeycloakTextInput
                     type="text"
                     id="idpInitiatedSsoRelayState"
                     name="attributes.saml_idp_initiated_sso_relay_state"
@@ -192,7 +192,7 @@ export const ClientSettings = ({
                     />
                   }
                 >
-                  <TextInput
+                  <KeycloakTextInput
                     type="text"
                     id="masterSamlProcessingUrl"
                     name="adminUrl"
@@ -232,7 +232,7 @@ export const ClientSettings = ({
               />
             }
           >
-            <TextInput
+            <KeycloakTextInput
               type="text"
               id="kc-admin-url"
               name="adminUrl"
@@ -412,7 +412,7 @@ export const ClientSettings = ({
                     : ValidatedOptions.default
                 }
               >
-                <TextInput
+                <KeycloakTextInput
                   type="text"
                   id="frontchannelLogoutUrl"
                   name="attributes.frontchannel.logout.url"
@@ -452,7 +452,7 @@ export const ClientSettings = ({
               : ValidatedOptions.default
           }
         >
-          <TextInput
+          <KeycloakTextInput
             type="text"
             id="backchannelLogoutUrl"
             name="attributes.backchannel.logout.url"

src/clients/advanced/AddHostDialog.tsx

@@ -8,10 +8,10 @@ import {
   Form,
   FormGroup,
   Modal,
-  TextInput,
 } from "@patternfly/react-core";
 import { useAdminClient } from "../../context/auth/AdminClient";
 import { useAlerts } from "../../components/alert/Alerts";
+import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 
 type Host = {
   node: string;
@@ -75,7 +75,7 @@ export const AddHostDialog = ({
     >
       <Form isHorizontal>
         <FormGroup label={t("nodeHost")} fieldId="nodeHost">
-          <TextInput id="nodeHost" ref={register} name="node" />
+          <KeycloakTextInput id="nodeHost" ref={register} name="node" />
         </FormGroup>
       </Form>
     </Modal>

src/clients/advanced/FineGrainOpenIdConnect.tsx

@@ -8,7 +8,6 @@ import {
   Select,
   SelectOption,
   SelectVariant,
-  TextInput,
 } from "@patternfly/react-core";
 
 import { FormAccess } from "../../components/form-access/FormAccess";
@@ -16,6 +15,7 @@ import { HelpItem } from "../../components/help-enabler/HelpItem";
 import { useServerInfo } from "../../context/server-info/ServerInfoProvider";
 import { sortProviders } from "../../util";
 import { MultiLineInput } from "../../components/multi-line-input/MultiLineInput";
+import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 
 type FineGrainOpenIdConnectProps = {
   save: () => void;
@@ -152,7 +152,7 @@ export const FineGrainOpenIdConnect = ({
           />
         }
       >
-        <TextInput
+        <KeycloakTextInput
           type="text"
           id="logoUrl"
           name="attributes.logoUri"
@@ -170,7 +170,7 @@ export const FineGrainOpenIdConnect = ({
           />
         }
       >
-        <TextInput
+        <KeycloakTextInput
           type="text"
           id="policyUrl"
           name="attributes.policyUri"
@@ -188,7 +188,7 @@ export const FineGrainOpenIdConnect = ({
           />
         }
       >
-        <TextInput
+        <KeycloakTextInput
           type="text"
           id="termsOfServiceUrl"
           name="attributes.tosUri"

src/clients/advanced/FineGrainSamlEndpointConfig.tsx

@@ -1,15 +1,11 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import type { Control } from "react-hook-form";
-import {
+import { ActionGroup, Button, FormGroup } from "@patternfly/react-core";
-  ActionGroup,
-  Button,
-  FormGroup,
-  TextInput,
-} from "@patternfly/react-core";
 
 import { FormAccess } from "../../components/form-access/FormAccess";
 import { HelpItem } from "../../components/help-enabler/HelpItem";
+import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 
 type FineGrainSamlEndpointConfigProps = {
   control: Control<Record<string, any>>;
@@ -35,7 +31,7 @@ export const FineGrainSamlEndpointConfig = ({
           />
         }
       >
-        <TextInput
+        <KeycloakTextInput
           ref={register()}
           type="text"
           id="assertionConsumerServicePostBindingURL"
@@ -52,7 +48,7 @@ export const FineGrainSamlEndpointConfig = ({
           />
         }
       >
-        <TextInput
+        <KeycloakTextInput
           ref={register()}
           type="text"
           id="assertionConsumerServiceRedirectBindingURL"
@@ -69,7 +65,7 @@ export const FineGrainSamlEndpointConfig = ({
           />
         }
       >
-        <TextInput
+        <KeycloakTextInput
           ref={register()}
           type="text"
           id="logoutServicePostBindingURL"
@@ -86,7 +82,7 @@ export const FineGrainSamlEndpointConfig = ({
           />
         }
       >
-        <TextInput
+        <KeycloakTextInput
           ref={register()}
           type="text"
           id="logoutServiceRedirectBindingURL"
@@ -103,7 +99,7 @@ export const FineGrainSamlEndpointConfig = ({
           />
         }
       >
-        <TextInput
+        <KeycloakTextInput
           ref={register()}
           type="text"
           id="logoutServiceArtifactBindingUrl"
@@ -120,7 +116,7 @@ export const FineGrainSamlEndpointConfig = ({
           />
         }
       >
-        <TextInput
+        <KeycloakTextInput
           ref={register()}
           type="text"
           id="artifactBindingUrl"
@@ -137,7 +133,7 @@ export const FineGrainSamlEndpointConfig = ({
           />
         }
       >
-        <TextInput
+        <KeycloakTextInput
           ref={register()}
           type="text"
           id="artifactResolutionService"

src/clients/authorization/AuthorizationEvaluate.tsx

@@ -40,6 +40,7 @@ import "./auth-evaluate.css";
 import { AuthorizationEvaluateResource } from "./AuthorizationEvaluateResource";
 import { SearchIcon } from "@patternfly/react-icons";
 import { ListEmptyState } from "../../components/list-empty-state/ListEmptyState";
+import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 
 interface EvaluateFormInputs
   extends Omit<ResourceEvaluation, "context" | "resources"> {
@@ -542,7 +543,7 @@ export const AuthorizationEvaluate = ({ client }: Props) => {
                 }
                 fieldId="client"
               >
-                <TextInput
+                <KeycloakTextInput
                   type="text"
                   id="alias"
                   name="alias"

src/clients/authorization/KeyBasedAttributeInput.tsx

@@ -6,7 +6,6 @@ import {
   Select,
   SelectOption,
   SelectVariant,
-  TextInput,
 } from "@patternfly/react-core";
 import {
   TableComposable,
@@ -17,10 +16,11 @@ import {
   Tr,
 } from "@patternfly/react-table";
 import { MinusCircleIcon, PlusCircleIcon } from "@patternfly/react-icons";
+import { camelCase } from "lodash-es";
 
 import type ResourceRepresentation from "@keycloak/keycloak-admin-client/lib/defs/resourceRepresentation";
 import { defaultContextAttributes } from "../utils";
-import { camelCase } from "lodash-es";
+import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 
 import "./key-based-attribute-input.css";
 
@@ -134,7 +134,7 @@ const ValueInput = ({
           )}
         />
       ) : (
-        <TextInput
+        <KeycloakTextInput
           id={`${getMessageBundleKey(attribute.key)}-value`}
           className="value-input"
           name={`${name}[${rowIndex}].value`}

src/clients/authorization/PermissionDetails.tsx

@@ -14,7 +14,6 @@ import {
   SelectVariant,
   Switch,
   TextArea,
-  TextInput,
 } from "@patternfly/react-core";
 
 import type PolicyRepresentation from "@keycloak/keycloak-admin-client/lib/defs/policyRepresentation";
@@ -34,6 +33,7 @@ import { toAuthorizationTab } from "../routes/AuthenticationTab";
 import { ScopeSelect } from "./ScopeSelect";
 import { toUpperCase } from "../../util";
 import { KeycloakSpinner } from "../../components/keycloak-spinner/KeycloakSpinner";
+import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 
 const DECISION_STRATEGIES = ["UNANIMOUS", "AFFIRMATIVE", "CONSENSUS"] as const;
 
@@ -211,7 +211,7 @@ export default function PermissionDetails() {
                 />
               }
             >
-              <TextInput
+              <KeycloakTextInput
                 id="name"
                 name="name"
                 ref={register({ required: true })}
@@ -274,7 +274,7 @@ export default function PermissionDetails() {
                   />
                 }
               >
-                <TextInput
+                <KeycloakTextInput
                   id="resourceType"
                   name="resourceType"
                   ref={register}

src/clients/authorization/ResourceDetails.tsx

@@ -12,7 +12,6 @@ import {
   FormGroup,
   PageSection,
   Switch,
-  TextInput,
   ValidatedOptions,
 } from "@patternfly/react-core";
 
@@ -33,6 +32,7 @@ import { MultiLineInput } from "../../components/multi-line-input/MultiLineInput
 import { toAuthorizationTab } from "../routes/AuthenticationTab";
 import { ScopePicker } from "./ScopePicker";
 import { KeyValueInput } from "../../components/key-value-form/KeyValueInput";
+import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 
 import "./resource-details.css";
 
@@ -193,7 +193,11 @@ export default function ResourceDetails() {
                 />
               }
             >
-              <TextInput id="owner" value={client.clientId} isReadOnly />
+              <KeycloakTextInput
+                id="owner"
+                value={client.clientId}
+                isReadOnly
+              />
             </FormGroup>
             <FormGroup
               label={t("common:name")}
@@ -210,7 +214,7 @@ export default function ResourceDetails() {
               }
               isRequired
             >
-              <TextInput
+              <KeycloakTextInput
                 id="name"
                 name="name"
                 ref={register({ required: true })}
@@ -231,7 +235,7 @@ export default function ResourceDetails() {
                 />
               }
             >
-              <TextInput id="displayName" name="name" ref={register} />
+              <KeycloakTextInput id="displayName" name="name" ref={register} />
             </FormGroup>
             <FormGroup
               label={t("type")}
@@ -240,7 +244,7 @@ export default function ResourceDetails() {
                 <HelpItem helpText="clients-help:type" fieldLabelId="type" />
               }
             >
-              <TextInput id="type" name="type" ref={register} />
+              <KeycloakTextInput id="type" name="type" ref={register} />
             </FormGroup>
             <FormGroup
               label={t("uris")}
@@ -269,7 +273,7 @@ export default function ResourceDetails() {
                 />
               }
             >
-              <TextInput id="iconUri" name="icon_uri" ref={register} />
+              <KeycloakTextInput id="iconUri" name="icon_uri" ref={register} />
             </FormGroup>
             <FormGroup
               hasNoPaddingTop

src/clients/authorization/ScopeDetails.tsx

@@ -10,7 +10,6 @@ import {
   DropdownItem,
   FormGroup,
   PageSection,
-  TextInput,
   ValidatedOptions,
 } from "@patternfly/react-core";
 
@@ -22,6 +21,7 @@ import { ViewHeader } from "../../components/view-header/ViewHeader";
 import { toAuthorizationTab } from "../routes/AuthenticationTab";
 import { useAdminClient, useFetch } from "../../context/auth/AdminClient";
 import { useAlerts } from "../../components/alert/Alerts";
+import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 import useToggle from "../../utils/useToggle";
 import { DeleteScopeDialog } from "./DeleteScopeDialog";
 
@@ -143,7 +143,7 @@ export default function ScopeDetails() {
             }
             isRequired
           >
-            <TextInput
+            <KeycloakTextInput
               id="name"
               name="name"
               ref={register({ required: true })}
@@ -162,7 +162,11 @@ export default function ScopeDetails() {
               />
             }
           >
-            <TextInput id="displayName" name="displayName" ref={register} />
+            <KeycloakTextInput
+              id="displayName"
+              name="displayName"
+              ref={register}
+            />
           </FormGroup>
           <FormGroup
             label={t("iconUri")}
@@ -174,7 +178,7 @@ export default function ScopeDetails() {
               />
             }
           >
-            <TextInput id="iconUri" name="iconUri" ref={register} />
+            <KeycloakTextInput id="iconUri" name="iconUri" ref={register} />
           </FormGroup>
           <ActionGroup>
             <div className="pf-u-mt-md">

src/clients/authorization/SearchDropdown.tsx

@@ -11,11 +11,11 @@ import {
   Select,
   SelectOption,
   SelectVariant,
-  TextInput,
 } from "@patternfly/react-core";
 
 import type PolicyProviderRepresentation from "@keycloak/keycloak-admin-client/lib/defs/policyProviderRepresentation";
 import useToggle from "../../utils/useToggle";
+import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 
 import "./search-dropdown.css";
 
@@ -93,7 +93,7 @@ export const SearchDropdown = ({
         onSubmit={handleSubmit(submit)}
       >
         <FormGroup label={t("common:name")} fieldId="name">
-          <TextInput
+          <KeycloakTextInput
             ref={register}
             type="text"
             id="name"
@@ -104,7 +104,7 @@ export const SearchDropdown = ({
         {isResource && (
           <>
             <FormGroup label={t("common:type")} fieldId="type">
-              <TextInput
+              <KeycloakTextInput
                 ref={register}
                 type="text"
                 id="type"
@@ -113,7 +113,7 @@ export const SearchDropdown = ({
               />
             </FormGroup>
             <FormGroup label={t("uris")} fieldId="uri">
-              <TextInput
+              <KeycloakTextInput
                 ref={register}
                 type="text"
                 id="uri"
@@ -122,7 +122,7 @@ export const SearchDropdown = ({
               />
             </FormGroup>
             <FormGroup label={t("owner")} fieldId="owner">
-              <TextInput
+              <KeycloakTextInput
                 ref={register}
                 type="text"
                 id="owner"
@@ -134,7 +134,7 @@ export const SearchDropdown = ({
         )}
         {!isResource && (
           <FormGroup label={t("resource")} fieldId="resource">
-            <TextInput
+            <KeycloakTextInput
               ref={register}
               type="text"
               id="resource"
@@ -144,7 +144,7 @@ export const SearchDropdown = ({
           </FormGroup>
         )}
         <FormGroup label={t("scope")} fieldId="scope">
-          <TextInput
+          <KeycloakTextInput
             ref={register}
             type="text"
             id="scope"

src/clients/authorization/policy/Group.tsx

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useFormContext, Controller } from "react-hook-form";
 import { MinusCircleIcon } from "@patternfly/react-icons";
-import { FormGroup, Button, Checkbox, TextInput } from "@patternfly/react-core";
+import { FormGroup, Button, Checkbox } from "@patternfly/react-core";
 import {
   TableComposable,
   Thead,
@@ -16,6 +16,7 @@ import type GroupRepresentation from "@keycloak/keycloak-admin-client/lib/defs/g
 import { HelpItem } from "../../../components/help-enabler/HelpItem";
 import { useAdminClient, useFetch } from "../../../context/auth/AdminClient";
 import { GroupPickerDialog } from "../../../components/group/GroupPickerDialog";
+import { KeycloakTextInput } from "../../../components/keycloak-text-input/KeycloakTextInput";
 
 export type GroupValue = {
   id: string;
@@ -69,7 +70,7 @@ export const Group = () => {
         }
         fieldId="groups"
       >
-        <TextInput
+        <KeycloakTextInput
           type="text"
           id="groupsClaim"
           name="groupsClaim"

src/clients/authorization/policy/NameDescription.tsx

@@ -1,14 +1,10 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { useFormContext } from "react-hook-form";
-import {
+import { FormGroup, TextArea, ValidatedOptions } from "@patternfly/react-core";
-  FormGroup,
-  TextArea,
-  TextInput,
-  ValidatedOptions,
-} from "@patternfly/react-core";
 
 import { HelpItem } from "../../../components/help-enabler/HelpItem";
+import { KeycloakTextInput } from "../../../components/keycloak-text-input/KeycloakTextInput";
 
 type NameDescriptionProps = {
   prefix: string;
@@ -38,7 +34,7 @@ export const NameDescription = ({ prefix }: NameDescriptionProps) => {
           />
         }
       >
-        <TextInput
+        <KeycloakTextInput
           type="text"
           id="kc-name"
           name="name"

src/clients/authorization/policy/Regex.tsx

@@ -1,9 +1,10 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { useFormContext } from "react-hook-form";
-import { FormGroup, TextInput } from "@patternfly/react-core";
+import { FormGroup } from "@patternfly/react-core";
 
 import { HelpItem } from "../../../components/help-enabler/HelpItem";
+import { KeycloakTextInput } from "../../../components/keycloak-text-input/KeycloakTextInput";
 
 export const Regex = () => {
   const { t } = useTranslation("clients");
@@ -27,7 +28,7 @@ export const Regex = () => {
           />
         }
       >
-        <TextInput
+        <KeycloakTextInput
           type="text"
           id="targetClaim"
           name="targetClaim"
@@ -49,7 +50,7 @@ export const Regex = () => {
         validated={errors.pattern ? "error" : "default"}
         helperTextInvalid={t("common:required")}
       >
-        <TextInput
+        <KeycloakTextInput
           ref={register({ required: true })}
           type="text"
           id="pattern"

src/clients/credentials/X509.tsx

@@ -1,13 +1,9 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { Controller, useFormContext } from "react-hook-form";
-import {
+import { FormGroup, Switch, ValidatedOptions } from "@patternfly/react-core";
-  FormGroup,
-  Switch,
-  TextInput,
-  ValidatedOptions,
-} from "@patternfly/react-core";
 import { HelpItem } from "../../components/help-enabler/HelpItem";
+import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 
 export const X509 = () => {
   const { t } = useTranslation("clients");
@@ -61,7 +57,7 @@ export const X509 = () => {
         }
         isRequired
       >
-        <TextInput
+        <KeycloakTextInput
           ref={register({ required: true })}
           type="text"
           id="kc-subject"

src/clients/import/ImportForm.tsx

@@ -4,7 +4,6 @@ import {
   Button,
   FormGroup,
   PageSection,
-  TextInput,
 } from "@patternfly/react-core";
 import type ClientRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientRepresentation";
 import React, { useState } from "react";
@@ -15,6 +14,7 @@ import { useAlerts } from "../../components/alert/Alerts";
 import { FormAccess } from "../../components/form-access/FormAccess";
 import { JsonFileUpload } from "../../components/json-file-upload/JsonFileUpload";
 import { ViewHeader } from "../../components/view-header/ViewHeader";
+import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 import { useAdminClient } from "../../context/auth/AdminClient";
 import { useRealm } from "../../context/realm-context/RealmContext";
 import { convertFormValuesToObject, convertToFormValues } from "../../util";
@@ -77,7 +77,7 @@ export default function ImportForm() {
             <JsonFileUpload id="realm-file" onChange={handleFileChange} />
             <ClientDescription />
             <FormGroup label={t("common:type")} fieldId="kc-type">
-              <TextInput
+              <KeycloakTextInput
                 type="text"
                 id="kc-type"
                 name="protocol"

src/clients/keys/Keys.tsx

@@ -14,7 +14,6 @@ import {
   Switch,
   Text,
   TextContent,
-  TextInput,
 } from "@patternfly/react-core";
 
 import type ClientRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientRepresentation";
@@ -22,6 +21,7 @@ import type CertificateRepresentation from "@keycloak/keycloak-admin-client/lib/
 import type KeyStoreConfig from "@keycloak/keycloak-admin-client/lib/defs/keystoreConfig";
 import { HelpItem } from "../../components/help-enabler/HelpItem";
 import { FormAccess } from "../../components/form-access/FormAccess";
+import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 import { Controller, useFormContext, useWatch } from "react-hook-form";
 import { GenerateKeyDialog } from "./GenerateKeyDialog";
 import { useFetch, useAdminClient } from "../../context/auth/AdminClient";
@@ -170,7 +170,7 @@ export const Keys = ({ clientId, save }: KeysProps) => {
                   />
                 }
               >
-                <TextInput
+                <KeycloakTextInput
                   type="text"
                   id="jwksUrl"
                   name="attributes.jwks.url"

src/clients/keys/StoreSettings.tsx

@@ -1,11 +1,12 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { useFormContext } from "react-hook-form";
-import { FormGroup, TextInput } from "@patternfly/react-core";
+import { FormGroup } from "@patternfly/react-core";
 
 import type KeyStoreConfig from "@keycloak/keycloak-admin-client/lib/defs/keystoreConfig";
 import { HelpItem } from "../../components/help-enabler/HelpItem";
 import { PasswordInput } from "../../components/password-input/PasswordInput";
+import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 
 export const StoreSettings = ({
   hidePassword = false,
@@ -28,7 +29,7 @@ export const StoreSettings = ({
           />
         }
       >
-        <TextInput
+        <KeycloakTextInput
           data-testid="keyAlias"
           type="text"
           id="keyAlias"

src/components/dynamic/MultivaluedScopesComponent.tsx

@@ -1,15 +1,10 @@
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Controller, useFormContext } from "react-hook-form";
-import {
+import { Button, Chip, ChipGroup, FormGroup } from "@patternfly/react-core";
-  Button,
-  Chip,
-  ChipGroup,
-  FormGroup,
-  TextInput,
-} from "@patternfly/react-core";
 
 import { HelpItem } from "../help-enabler/HelpItem";
+import { KeycloakTextInput } from "../keycloak-text-input/KeycloakTextInput";
 import type { ComponentProps } from "./components";
 import { AddScopeDialog } from "../../clients/scopes/AddScopeDialog";
 import { useAdminClient, useFetch } from "../../context/auth/AdminClient";
@@ -86,7 +81,7 @@ export const MultivaluedScopesComponent = ({
                 />
               )}
               {value.length === 0 && !conditionName && (
-                <TextInput
+                <KeycloakTextInput
                   type="text"
                   id="kc-scopes"
                   value={value}

src/components/dynamic/StringComponent.tsx

@@ -1,9 +1,10 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { useFormContext } from "react-hook-form";
-import { FormGroup, TextInput } from "@patternfly/react-core";
+import { FormGroup } from "@patternfly/react-core";
 
 import { HelpItem } from "../help-enabler/HelpItem";
+import { KeycloakTextInput } from "../keycloak-text-input/KeycloakTextInput";
 import type { ComponentProps } from "./components";
 
 export const StringComponent = ({
@@ -24,7 +25,7 @@ export const StringComponent = ({
       }
       fieldId={name!}
     >
-      <TextInput
+      <KeycloakTextInput
         id={name!}
         data-testid={name}
         isDisabled={isDisabled}

src/components/form-access/FormAccess.test.tsx

@@ -1,11 +1,12 @@
 /**
  * @jest-environment jsdom
  */
-import { FormGroup, Switch, TextInput } from "@patternfly/react-core";
+import { FormGroup, Switch } from "@patternfly/react-core";
 import { render, screen } from "@testing-library/react";
 import type WhoAmIRepresentation from "@keycloak/keycloak-admin-client/lib/defs/whoAmIRepresentation";
 import React from "react";
 import { Controller, useForm } from "react-hook-form";
+import { KeycloakTextInput } from "../keycloak-text-input/KeycloakTextInput";
 import { AccessContextProvider } from "../../context/access/Access";
 import { RealmContext } from "../../context/realm-context/RealmContext";
 import { WhoAmI, WhoAmIContext } from "../../context/whoami/WhoAmI";
@@ -26,7 +27,7 @@ describe("FormAccess", () => {
           <AccessContextProvider>
             <FormAccess role="manage-clients">
               <FormGroup label="test" fieldId="field">
-                <TextInput
+                <KeycloakTextInput
                   type="text"
                   id="field"
                   data-testid="field"

src/components/key-value-form/KeyValueInput.tsx

@@ -7,11 +7,11 @@ import {
   Button,
   Flex,
   FlexItem,
-  TextInput,
 } from "@patternfly/react-core";
 import { MinusCircleIcon, PlusCircleIcon } from "@patternfly/react-icons";
 
 import type { KeyValueType } from "./key-value-convert";
+import { KeycloakTextInput } from "../keycloak-text-input/KeycloakTextInput";
 
 type KeyValueInputProps = {
   name: string;
@@ -58,7 +58,7 @@ export const KeyValueInput = ({ name }: KeyValueInputProps) => {
         {fields.map((attribute, index) => (
           <Flex key={attribute.id} data-testid="row">
             <FlexItem grow={{ default: "grow" }}>
-              <TextInput
+              <KeycloakTextInput
                 name={`${name}[${index}].key`}
                 ref={register()}
                 placeholder={t("keyPlaceholder")}
@@ -71,7 +71,7 @@ export const KeyValueInput = ({ name }: KeyValueInputProps) => {
               grow={{ default: "grow" }}
               spacer={{ default: "spacerNone" }}
             >
-              <TextInput
+              <KeycloakTextInput
                 name={`${name}[${index}].value`}
                 ref={register()}
                 placeholder={t("valuePlaceholder")}

src/components/keycloak-text-input/KeycloakTextInput.tsx

@@ -0,0 +1,27 @@
+import { TextInput, TextInputProps } from "@patternfly/react-core";
+import React, { ComponentProps, forwardRef, HTMLProps } from "react";
+
+// PatternFly changes the signature of the 'onChange' handler for input elements.
+// This causes issues with React Hook Form as it expects the default signature for an input element.
+// So we have to create this wrapper component that takes care of converting these signatures for us.
+
+export type KeycloakTextInputProps = Omit<
+  ComponentProps<typeof TextInput>,
+  "onChange"
+> &
+  Pick<HTMLProps<HTMLInputElement>, "onChange">;
+
+export const KeycloakTextInput = forwardRef<
+  HTMLInputElement,
+  KeycloakTextInputProps
+>(({ onChange, ...props }, ref) => {
+  const onChangeForward: TextInputProps["onChange"] = (_, event) =>
+    onChange?.(event);
+
+  return <TextInput {...props} ref={ref} onChange={onChangeForward} />;
+});
+
+// We need to fake the displayName to match what PatternFly expects.
+// This is because PatternFly uses it to filter children in certain aspects.
+// This is a stupid approach, but it's not like we can change that.
+KeycloakTextInput.displayName = "TextInput";

src/components/password-input/PasswordInput.tsx

@@ -1,14 +1,14 @@
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import {
+import { Button, InputGroup } from "@patternfly/react-core";
-  Button,
-  InputGroup,
-  TextInput,
-  TextInputProps,
-} from "@patternfly/react-core";
 import { EyeIcon, EyeSlashIcon } from "@patternfly/react-icons";
 
-type PasswordInputProps = TextInputProps & {
+import {
+  KeycloakTextInput,
+  KeycloakTextInputProps,
+} from "../keycloak-text-input/KeycloakTextInput";
+
+type PasswordInputProps = KeycloakTextInputProps & {
   hasReveal?: boolean;
 };
 
@@ -21,7 +21,7 @@ const PasswordInputBase = ({
   const [hidePassword, setHidePassword] = useState(true);
   return (
     <InputGroup>
-      <TextInput
+      <KeycloakTextInput
         {...rest}
         type={hidePassword ? "password" : "text"}
         ref={innerRef}

src/events/AdminEvents.tsx

@@ -14,7 +14,6 @@ import {
   Select,
   SelectOption,
   SelectVariant,
-  TextInput,
 } from "@patternfly/react-core";
 import {
   cellWidth,
@@ -32,6 +31,7 @@ import { useTranslation } from "react-i18next";
 import { pickBy } from "lodash-es";
 import { ListEmptyState } from "../components/list-empty-state/ListEmptyState";
 import { KeycloakDataTable } from "../components/table-toolbar/KeycloakDataTable";
+import { KeycloakTextInput } from "../components/keycloak-text-input/KeycloakTextInput";
 import { useAdminClient } from "../context/auth/AdminClient";
 import { useRealm } from "../context/realm-context/RealmContext";
 import { useServerInfo } from "../context/server-info/ServerInfoProvider";
@@ -345,7 +345,7 @@ export const AdminEvents = () => {
                 fieldId="kc-resourcePath"
                 className="keycloak__events_search__form_label"
               >
-                <TextInput
+                <KeycloakTextInput
                   ref={register()}
                   type="text"
                   id="kc-resourcePath"
@@ -358,7 +358,7 @@ export const AdminEvents = () => {
                 fieldId="kc-realm"
                 className="keycloak__events_search__form_label"
               >
-                <TextInput
+                <KeycloakTextInput
                   ref={register()}
                   type="text"
                   id="kc-realm"
@@ -371,7 +371,7 @@ export const AdminEvents = () => {
                 fieldId="kc-client"
                 className="keycloak__events_search__form_label"
               >
-                <TextInput
+                <KeycloakTextInput
                   ref={register()}
                   type="text"
                   id="kc-client"
@@ -384,7 +384,7 @@ export const AdminEvents = () => {
                 fieldId="kc-user"
                 className="keycloak__events_search__form_label"
               >
-                <TextInput
+                <KeycloakTextInput
                   ref={register()}
                   type="text"
                   id="kc-user"
@@ -397,7 +397,7 @@ export const AdminEvents = () => {
                 fieldId="kc-ipAddress"
                 className="keycloak__events_search__form_label"
               >
-                <TextInput
+                <KeycloakTextInput
                   ref={register()}
                   type="text"
                   id="kc-ipAddress"
@@ -410,7 +410,7 @@ export const AdminEvents = () => {
                 fieldId="kc-dateFrom"
                 className="keycloak__events_search__form_label"
               >
-                <TextInput
+                <KeycloakTextInput
                   ref={register()}
                   type="text"
                   id="kc-dateFrom"
@@ -425,7 +425,7 @@ export const AdminEvents = () => {
                 fieldId="kc-dateTo"
                 className="keycloak__events_search__form_label"
               >
-                <TextInput
+                <KeycloakTextInput
                   ref={register()}
                   type="text"
                   id="kc-dateTo"

src/events/EventsSection.tsx

@@ -19,7 +19,6 @@ import {
   SelectVariant,
   Tab,
   TabTitleText,
-  TextInput,
   Tooltip,
 } from "@patternfly/react-core";
 import { CheckCircleIcon, WarningTriangleIcon } from "@patternfly/react-icons";
@@ -37,6 +36,7 @@ import { KeycloakTabs } from "../components/keycloak-tabs/KeycloakTabs";
 import { ListEmptyState } from "../components/list-empty-state/ListEmptyState";
 import { KeycloakDataTable } from "../components/table-toolbar/KeycloakDataTable";
 import { ViewHeader } from "../components/view-header/ViewHeader";
+import { KeycloakTextInput } from "../components/keycloak-text-input/KeycloakTextInput";
 import { useAdminClient, useFetch } from "../context/auth/AdminClient";
 import { useRealm } from "../context/realm-context/RealmContext";
 import { toRealmSettings } from "../realm-settings/routes/RealmSettings";
@@ -224,7 +224,7 @@ export default function EventsSection() {
                 fieldId="kc-userId"
                 className="keycloak__events_search__form_label"
               >
-                <TextInput
+                <KeycloakTextInput
                   ref={register()}
                   type="text"
                   id="kc-userId"
@@ -302,7 +302,7 @@ export default function EventsSection() {
                 fieldId="kc-client"
                 className="keycloak__events_search__form_label"
               >
-                <TextInput
+                <KeycloakTextInput
                   ref={register()}
                   type="text"
                   id="kc-client"
@@ -315,7 +315,7 @@ export default function EventsSection() {
                 fieldId="kc-dateFrom"
                 className="keycloak__events_search__form_label"
               >
-                <TextInput
+                <KeycloakTextInput
                   ref={register()}
                   type="text"
                   id="kc-dateFrom"
@@ -330,7 +330,7 @@ export default function EventsSection() {
                 fieldId="kc-dateTo"
                 className="keycloak__events_search__form_label"
               >
-                <TextInput
+                <KeycloakTextInput
                   ref={register()}
                   type="text"
                   id="kc-dateTo"

src/groups/GroupsModal.tsx

@@ -7,7 +7,6 @@ import {
   FormGroup,
   Modal,
   ModalVariant,
-  TextInput,
   ValidatedOptions,
 } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
@@ -16,6 +15,7 @@ import { useForm } from "react-hook-form";
 import type GroupRepresentation from "@keycloak/keycloak-admin-client/lib/defs/groupRepresentation";
 import { useAdminClient } from "../context/auth/AdminClient";
 import { useAlerts } from "../components/alert/Alerts";
+import { KeycloakTextInput } from "../components/keycloak-text-input/KeycloakTextInput";
 
 type GroupsModalProps = {
   id?: string;
@@ -104,7 +104,7 @@ export const GroupsModal = ({
           }
           isRequired
         >
-          <TextInput
+          <KeycloakTextInput
             data-testid="groupNameInput"
             aria-label="group name input"
             ref={register({ required: true })}

src/identity-providers/add/AddMapper.tsx

@@ -8,7 +8,6 @@ import {
   Button,
   FormGroup,
   PageSection,
-  TextInput,
   ValidatedOptions,
 } from "@patternfly/react-core";
 
@@ -32,6 +31,7 @@ import { AddMapperForm } from "./AddMapperForm";
 import { DynamicComponents } from "../../components/dynamic/DynamicComponents";
 import { KeycloakSpinner } from "../../components/keycloak-spinner/KeycloakSpinner";
 import type { AttributeForm } from "../../components/key-value-form/AttributeForm";
+import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 
 export type IdPMapperRepresentationWithAttributes =
   IdentityProviderMapperRepresentation & AttributeForm;
@@ -177,7 +177,7 @@ export default function AddMapper() {
             }
             helperTextInvalid={t("common:required")}
           >
-            <TextInput
+            <KeycloakTextInput
               ref={register()}
               type="text"
               value={currentMapper?.id}

src/identity-providers/add/AddMapperForm.tsx

@@ -6,7 +6,6 @@ import {
   Select,
   SelectOption,
   SelectVariant,
-  TextInput,
   ValidatedOptions,
 } from "@patternfly/react-core";
 
@@ -14,6 +13,7 @@ import { HelpItem } from "../../components/help-enabler/HelpItem";
 import type IdentityProviderMapperRepresentation from "@keycloak/keycloak-admin-client/lib/defs/identityProviderMapperRepresentation";
 import type { IdPMapperRepresentationWithAttributes } from "./AddMapper";
 import { useServerInfo } from "../../context/server-info/ServerInfoProvider";
+import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 
 type AddMapperFormProps = {
   mapperTypes: Record<string, IdentityProviderMapperRepresentation>;
@@ -60,7 +60,7 @@ export const AddMapperForm = ({
         }
         helperTextInvalid={t("common:required")}
       >
-        <TextInput
+        <KeycloakTextInput
           ref={register({ required: true })}
           type="text"
           datatest-id="name-input"

src/identity-providers/add/DescriptorSettings.tsx

@@ -7,12 +7,12 @@ import {
   Select,
   SelectOption,
   SelectVariant,
-  TextInput,
   ValidatedOptions,
 } from "@patternfly/react-core";
 import { HelpItem } from "../../components/help-enabler/HelpItem";
 import { SwitchField } from "../component/SwitchField";
 import { TextField } from "../component/TextField";
+import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 
 import "./discovery-settings.css";
 
@@ -66,7 +66,7 @@ const Fields = ({ readOnly }: DescriptorSettingsProps) => {
           />
         }
       >
-        <TextInput
+        <KeycloakTextInput
           type="text"
           name="config.entityId"
           data-testid="serviceProviderEntityId"
@@ -91,7 +91,7 @@ const Fields = ({ readOnly }: DescriptorSettingsProps) => {
         }
         helperTextInvalid={t("common:required")}
       >
-        <TextInput
+        <KeycloakTextInput
           type="text"
           data-testid="sso-service-url"
           id="kc-sso-service-url"
@@ -121,7 +121,7 @@ const Fields = ({ readOnly }: DescriptorSettingsProps) => {
         }
         helperTextInvalid={t("common:required")}
       >
-        <TextInput
+        <KeycloakTextInput
           type="text"
           id="single-logout-service-url"
           name="config.singleLogoutServiceUrl"
@@ -278,7 +278,7 @@ const Fields = ({ readOnly }: DescriptorSettingsProps) => {
           }
           fieldId="principalAttribute"
         >
-          <TextInput
+          <KeycloakTextInput
             type="text"
             id="principalAttribute"
             name="config.principalAttribute"
@@ -448,7 +448,7 @@ const Fields = ({ readOnly }: DescriptorSettingsProps) => {
         fieldId="allowedClockSkew"
         helperTextInvalid={t("common:required")}
       >
-        <TextInput
+        <KeycloakTextInput
           type="number"
           min="0"
           max="2147483"
@@ -470,7 +470,7 @@ const Fields = ({ readOnly }: DescriptorSettingsProps) => {
         fieldId="attributeConsumingServiceIndex"
         helperTextInvalid={t("common:required")}
       >
-        <TextInput
+        <KeycloakTextInput
           type="number"
           min="0"
           max="65535"
@@ -492,7 +492,7 @@ const Fields = ({ readOnly }: DescriptorSettingsProps) => {
         fieldId="attributeConsumingServiceName"
         helperTextInvalid={t("common:required")}
       >
-        <TextInput
+        <KeycloakTextInput
           type="text"
           id="attributeConsumingServiceName"
           name="config.attributeConsumingServiceName"

src/identity-providers/add/DiscoverySettings.tsx

@@ -4,12 +4,12 @@ import { useFormContext, useWatch } from "react-hook-form";
 import {
   ExpandableSection,
   FormGroup,
-  TextInput,
   ValidatedOptions,
 } from "@patternfly/react-core";
 
 import { SwitchField } from "../component/SwitchField";
 import { TextField } from "../component/TextField";
+import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 
 import "./discovery-settings.css";
 
@@ -47,7 +47,7 @@ const Fields = ({ readOnly }: DiscoverySettingsProps) => {
         }
         helperTextInvalid={t("common:required")}
       >
-        <TextInput
+        <KeycloakTextInput
           type="text"
           data-testid="authorizationUrl"
           id="kc-authorization-url"
@@ -73,7 +73,7 @@ const Fields = ({ readOnly }: DiscoverySettingsProps) => {
         }
         helperTextInvalid={t("common:required")}
       >
-        <TextInput
+        <KeycloakTextInput
           type="text"
           id="tokenUrl"
           name="config.tokenUrl"

src/identity-providers/add/OIDCGeneralSettings.tsx

@@ -1,12 +1,13 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { useFormContext } from "react-hook-form";
-import { FormGroup, TextInput, ValidatedOptions } from "@patternfly/react-core";
+import { FormGroup, ValidatedOptions } from "@patternfly/react-core";
 
 import { HelpItem } from "../../components/help-enabler/HelpItem";
 import { RedirectUrl } from "../component/RedirectUrl";
 import { TextField } from "../component/TextField";
 import { DisplayOrder } from "../component/DisplayOrder";
+import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 import type { IdentityProviderParams } from "../routes/IdentityProvider";
 import { useParams } from "react-router-dom";
 
@@ -38,7 +39,7 @@ export const OIDCGeneralSettings = ({ id }: { id: string }) => {
         }
         helperTextInvalid={t("common:required")}
       >
-        <TextInput
+        <KeycloakTextInput
           isReadOnly={tab === "settings"}
           isRequired
           type="text"

src/identity-providers/add/SamlConnectSettings.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { useFormContext } from "react-hook-form";
-import { FormGroup, TextInput, Title } from "@patternfly/react-core";
+import { FormGroup, Title } from "@patternfly/react-core";
 
 import { HelpItem } from "../../components/help-enabler/HelpItem";
 import { useTranslation } from "react-i18next";
@@ -12,6 +12,7 @@ import { useRealm } from "../../context/realm-context/RealmContext";
 import { DescriptorSettings } from "./DescriptorSettings";
 import { getBaseUrl } from "../../util";
 import { DiscoveryEndpointField } from "../component/DiscoveryEndpointField";
+import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 import environment from "../../environment";
 
 export const SamlConnectSettings = () => {
@@ -92,7 +93,7 @@ export const SamlConnectSettings = () => {
         helperTextInvalid={t("common:required")}
         validated={errors.config?.entityId ? "error" : "default"}
       >
-        <TextInput
+        <KeycloakTextInput
           type="text"
           name="config.entityId"
           data-testid="serviceProviderEntityId"

src/identity-providers/add/SamlGeneralSettings.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { useFormContext } from "react-hook-form";
-import { FormGroup, TextInput, ValidatedOptions } from "@patternfly/react-core";
+import { FormGroup, ValidatedOptions } from "@patternfly/react-core";
 
 import { HelpItem } from "../../components/help-enabler/HelpItem";
 import { RedirectUrl } from "../component/RedirectUrl";
@@ -10,6 +10,7 @@ import { DisplayOrder } from "../component/DisplayOrder";
 import { useParams } from "react-router";
 import type { IdentityProviderParams } from "../routes/IdentityProvider";
 import { FormattedLink } from "../../components/external-link/FormattedLink";
+import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 import { useRealm } from "../../context/realm-context/RealmContext";
 import environment from "../../environment";
 
@@ -47,7 +48,7 @@ export const SamlGeneralSettings = ({ id }: { id: string }) => {
         }
         helperTextInvalid={t("common:required")}
       >
-        <TextInput
+        <KeycloakTextInput
           isRequired
           type="text"
           id="alias"

src/identity-providers/component/ClientIdSecret.tsx

@@ -1,10 +1,11 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { useFormContext } from "react-hook-form";
-import { FormGroup, TextInput, ValidatedOptions } from "@patternfly/react-core";
+import { FormGroup, ValidatedOptions } from "@patternfly/react-core";
 
 import { HelpItem } from "../../components/help-enabler/HelpItem";
 import { PasswordInput } from "../../components/password-input/PasswordInput";
+import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 
 export const ClientIdSecret = ({
   secretRequired = true,
@@ -39,7 +40,7 @@ export const ClientIdSecret = ({
         }
         helperTextInvalid={t("common:required")}
       >
-        <TextInput
+        <KeycloakTextInput
           isRequired
           type="text"
           id="kc-client-id"
@@ -75,7 +76,7 @@ export const ClientIdSecret = ({
           />
         )}
         {!create && (
-          <TextInput
+          <KeycloakTextInput
             isRequired={secretRequired}
             type="password"
             id="kc-client-secret"

src/identity-providers/component/DiscoveryEndpointField.tsx

@@ -1,10 +1,11 @@
 import React, { ReactNode, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useFormContext } from "react-hook-form";
-import { FormGroup, TextInput, Switch } from "@patternfly/react-core";
+import { FormGroup, Switch } from "@patternfly/react-core";
 
 import environment from "../../environment";
 import { HelpItem } from "../../components/help-enabler/HelpItem";
+import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 import { useAdminClient } from "../../context/auth/AdminClient";
 
 type DiscoveryEndpointFieldProps = {
@@ -124,7 +125,7 @@ export const DiscoveryEndpointField = ({
           }
           isRequired
         >
-          <TextInput
+          <KeycloakTextInput
             type="text"
             name="discoveryEndpoint"
             data-testid="discoveryEndpoint"

src/identity-providers/component/TextField.tsx

@@ -1,14 +1,14 @@
 import React from "react";
 import { useFormContext } from "react-hook-form";
-import { TextInput } from "@patternfly/react-core";
 
 import { FieldProps, FormGroupField } from "./FormGroupField";
+import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 
 export const TextField = ({ label, field, isReadOnly = false }: FieldProps) => {
   const { register } = useFormContext();
   return (
     <FormGroupField label={label}>
-      <TextInput
+      <KeycloakTextInput
         type="text"
         id={label}
         data-testid={label}

src/realm-roles/RealmRoleForm.tsx

@@ -5,7 +5,6 @@ import {
   FormGroup,
   PageSection,
   TextArea,
-  TextInput,
   ValidatedOptions,
 } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
@@ -13,6 +12,7 @@ import type { UseFormMethods } from "react-hook-form";
 import { ViewHeader } from "../components/view-header/ViewHeader";
 import { FormAccess } from "../components/form-access/FormAccess";
 import type { AttributeForm } from "../components/key-value-form/AttributeForm";
+import { KeycloakTextInput } from "../components/keycloak-text-input/KeycloakTextInput";
 import { useRealm } from "../context/realm-context/RealmContext";
 import { useHistory } from "react-router-dom";
 
@@ -50,7 +50,7 @@ export const RealmRoleForm = ({
             validated={errors.name ? "error" : "default"}
             helperTextInvalid={t("common:required")}
           >
-            <TextInput
+            <KeycloakTextInput
               ref={register({
                 required: !editMode,
                 validate: (value: string) =>

src/realm-settings/AddMessageBundleModal.tsx

@@ -6,13 +6,14 @@ import {
   FormGroup,
   Modal,
   ModalVariant,
-  TextInput,
   ValidatedOptions,
 } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
 import { useForm, UseFormMethods } from "react-hook-form";
 import type { KeyValueType } from "../components/key-value-form/key-value-convert";
 
+import { KeycloakTextInput } from "../components/keycloak-text-input/KeycloakTextInput";
+
 type AddMessageBundleModalProps = {
   id?: string;
   form: UseFormMethods<BundleForm>;
@@ -75,7 +76,7 @@ export const AddMessageBundleModal = ({
           }
           isRequired
         >
-          <TextInput
+          <KeycloakTextInput
             data-testid="key-input"
             ref={register({ required: true })}
             autoFocus
@@ -97,7 +98,7 @@ export const AddMessageBundleModal = ({
           }
           isRequired
         >
-          <TextInput
+          <KeycloakTextInput
             data-testid="value-input"
             ref={register({ required: true })}
             type="text"

src/realm-settings/AddUserEmailModal.tsx

@@ -7,7 +7,6 @@ import {
   Modal,
   ModalVariant,
   TextContent,
-  TextInput,
   ValidatedOptions,
 } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
@@ -16,6 +15,7 @@ import { useForm } from "react-hook-form";
 import { emailRegexPattern } from "../util";
 import { useAdminClient } from "../context/auth/AdminClient";
 import { useWhoAmI } from "../context/whoami/WhoAmI";
+import { KeycloakTextInput } from "../components/keycloak-text-input/KeycloakTextInput";
 import type { EmailRegistrationCallback } from "./EmailTab";
 
 type AddUserEmailModalProps = {
@@ -90,7 +90,7 @@ export const AddUserEmailModal = ({ callback }: AddUserEmailModalProps) => {
           }
           isRequired
         >
-          <TextInput
+          <KeycloakTextInput
             data-testid="email-address-input"
             ref={register({ required: true, pattern: emailRegexPattern })}
             autoFocus

src/realm-settings/ClientProfileForm.tsx

@@ -17,7 +17,6 @@ import {
   PageSection,
   Text,
   TextArea,
-  TextInput,
   TextVariants,
   ValidatedOptions,
 } from "@patternfly/react-core";
@@ -30,6 +29,7 @@ import { useAlerts } from "../components/alert/Alerts";
 import { useAdminClient, useFetch } from "../context/auth/AdminClient";
 import type ClientProfileRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientProfileRepresentation";
 import { HelpItem } from "../components/help-enabler/HelpItem";
+import { KeycloakTextInput } from "../components/keycloak-text-input/KeycloakTextInput";
 import { PlusCircleIcon, TrashIcon } from "@patternfly/react-icons";
 import "./realm-settings-section.css";
 import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
@@ -236,7 +236,7 @@ export default function ClientProfileForm() {
               errors.name ? ValidatedOptions.error : ValidatedOptions.default
             }
           >
-            <TextInput
+            <KeycloakTextInput
               ref={register({ required: true })}
               name="name"
               type="text"

src/realm-settings/EmailTab.tsx

@@ -6,7 +6,6 @@ import {
   FormGroup,
   PageSection,
   Switch,
-  TextInput,
 } from "@patternfly/react-core";
 import type RealmRepresentation from "@keycloak/keycloak-admin-client/lib/defs/realmRepresentation";
 import React, { useState } from "react";
@@ -16,6 +15,7 @@ import { useAlerts } from "../components/alert/Alerts";
 import { FormAccess } from "../components/form-access/FormAccess";
 import { HelpItem } from "../components/help-enabler/HelpItem";
 import { FormPanel } from "../components/scroll-form/FormPanel";
+import { KeycloakTextInput } from "../components/keycloak-text-input/KeycloakTextInput";
 import { useAdminClient } from "../context/auth/AdminClient";
 import { useRealm } from "../context/realm-context/RealmContext";
 import { useWhoAmI } from "../context/whoami/WhoAmI";
@@ -161,7 +161,7 @@ export const RealmSettingsEmailTab = ({
               validated={errors.smtpServer?.from ? "error" : "default"}
               helperTextInvalid={t("users:emailInvalid")}
             >
-              <TextInput
+              <KeycloakTextInput
                 type="email"
                 id="kc-sender-email-address"
                 data-testid="sender-email-address"
@@ -184,7 +184,7 @@ export const RealmSettingsEmailTab = ({
                 />
               }
             >
-              <TextInput
+              <KeycloakTextInput
                 type="text"
                 id="kc-from-display-name"
                 data-testid="from-display-name"
@@ -199,7 +199,7 @@ export const RealmSettingsEmailTab = ({
               validated={errors.smtpServer?.replyTo ? "error" : "default"}
               helperTextInvalid={t("users:emailInvalid")}
             >
-              <TextInput
+              <KeycloakTextInput
                 type="email"
                 id="kc-reply-to"
                 name="smtpServer.replyTo"
@@ -220,7 +220,7 @@ export const RealmSettingsEmailTab = ({
                 />
               }
             >
-              <TextInput
+              <KeycloakTextInput
                 type="text"
                 id="kc-reply-to-display-name"
                 name="smtpServer.replyToDisplayName"
@@ -238,7 +238,7 @@ export const RealmSettingsEmailTab = ({
                 />
               }
             >
-              <TextInput
+              <KeycloakTextInput
                 type="text"
                 id="kc-envelope-from"
                 name="smtpServer.envelopeFrom"
@@ -265,7 +265,7 @@ export const RealmSettingsEmailTab = ({
               validated={errors.smtpServer?.host ? "error" : "default"}
               helperTextInvalid={t("common:required")}
             >
-              <TextInput
+              <KeycloakTextInput
                 type="text"
                 id="kc-host"
                 name="smtpServer.host"
@@ -275,7 +275,7 @@ export const RealmSettingsEmailTab = ({
               />
             </FormGroup>
             <FormGroup label={t("port")} fieldId="kc-port">
-              <TextInput
+              <KeycloakTextInput
                 type="text"
                 id="kc-port"
                 name="smtpServer.port"
@@ -347,7 +347,7 @@ export const RealmSettingsEmailTab = ({
                   validated={errors.smtpServer?.user ? "error" : "default"}
                   helperTextInvalid={t("common:required")}
                 >
-                  <TextInput
+                  <KeycloakTextInput
                     type="text"
                     id="kc-username"
                     data-testid="username-input"
@@ -370,7 +370,7 @@ export const RealmSettingsEmailTab = ({
                     />
                   }
                 >
-                  <TextInput
+                  <KeycloakTextInput
                     type="password"
                     id="kc-password"
                     data-testid="password-input"

src/realm-settings/GeneralTab.tsx

@@ -13,7 +13,6 @@ import {
   Stack,
   StackItem,
   Switch,
-  TextInput,
 } from "@patternfly/react-core";
 
 import type RealmRepresentation from "@keycloak/keycloak-admin-client/lib/defs/realmRepresentation";
@@ -24,6 +23,7 @@ import { useRealm } from "../context/realm-context/RealmContext";
 import { FormAccess } from "../components/form-access/FormAccess";
 import { HelpItem } from "../components/help-enabler/HelpItem";
 import { FormattedLink } from "../components/external-link/FormattedLink";
+import { KeycloakTextInput } from "../components/keycloak-text-input/KeycloakTextInput";
 
 type RealmSettingsGeneralTabProps = {
   save: (realm: RealmRepresentation) => void;
@@ -71,7 +71,7 @@ export const RealmSettingsGeneralTab = ({
           />
         </FormGroup>
         <FormGroup label={t("displayName")} fieldId="kc-display-name">
-          <TextInput
+          <KeycloakTextInput
             type="text"
             id="kc-display-name"
             name="displayName"
@@ -79,7 +79,7 @@ export const RealmSettingsGeneralTab = ({
           />
         </FormGroup>
         <FormGroup label={t("htmlDisplayName")} fieldId="kc-html-display-name">
-          <TextInput
+          <KeycloakTextInput
             type="text"
             id="kc-html-display-name"
             name="displayNameHtml"
@@ -96,7 +96,7 @@ export const RealmSettingsGeneralTab = ({
             />
           }
         >
-          <TextInput
+          <KeycloakTextInput
             type="text"
             id="kc-frontend-url"
             name="attributes.frontendUrl"

src/realm-settings/NewClientPolicyForm.tsx

@@ -17,7 +17,6 @@ import {
   PageSection,
   Text,
   TextArea,
-  TextInput,
   TextVariants,
   ValidatedOptions,
 } from "@patternfly/react-core";
@@ -30,6 +29,7 @@ import { useRealm } from "../context/realm-context/RealmContext";
 import { useAlerts } from "../components/alert/Alerts";
 import { useAdminClient, useFetch } from "../context/auth/AdminClient";
 import { HelpItem } from "../components/help-enabler/HelpItem";
+import { KeycloakTextInput } from "../components/keycloak-text-input/KeycloakTextInput";
 import { PlusCircleIcon, TrashIcon } from "@patternfly/react-icons";
 import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
 import type ClientPolicyRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientPolicyRepresentation";
@@ -466,7 +466,7 @@ export default function NewClientPolicyForm() {
               errors.name ? ValidatedOptions.error : ValidatedOptions.default
             }
           >
-            <TextInput
+            <KeycloakTextInput
               ref={form.register({ required: true })}
               type="text"
               id="kc-client-profile-name"

src/realm-settings/keys/key-providers/KeyProviderForm.tsx

@@ -21,6 +21,7 @@ import { HelpItem } from "../../../components/help-enabler/HelpItem";
 import { KEY_PROVIDER_TYPE } from "../../../util";
 import { ViewHeader } from "../../../components/view-header/ViewHeader";
 import { DynamicComponents } from "../../../components/dynamic/DynamicComponents";
+import { KeycloakTextInput } from "../../../components/keycloak-text-input/KeycloakTextInput";
 import { useServerInfo } from "../../../context/server-info/ServerInfoProvider";
 
 type KeyProviderFormProps = {
@@ -105,7 +106,7 @@ export const KeyProviderForm = ({
           fieldId="providerId"
           isRequired
         >
-          <TextInput
+          <KeycloakTextInput
             ref={register}
             id="id"
             type="text"

src/realm-settings/security-defences/HelpLinkTextInput.tsx

@@ -1,9 +1,10 @@
 import React from "react";
 import { Trans, useTranslation } from "react-i18next";
-import { FormGroup, TextInput } from "@patternfly/react-core";
+import { FormGroup } from "@patternfly/react-core";
 
 import { HelpItem } from "../../components/help-enabler/HelpItem";
 import { FormattedLink } from "../../components/external-link/FormattedLink";
+import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 import { useFormContext } from "react-hook-form";
 
 type HelpLinkTextInputProps = {
@@ -34,7 +35,12 @@ export const HelpLinkTextInput = ({
         />
       }
     >
-      <TextInput type="text" id={name} name={fieldName} ref={register} />
+      <KeycloakTextInput
+        type="text"
+        id={name}
+        name={fieldName}
+        ref={register}
+      />
     </FormGroup>
   );
 };

src/realm-settings/user-profile/AttributesGroupForm.tsx

@@ -6,7 +6,6 @@ import {
   PageSection,
   Text,
   TextContent,
-  TextInput,
 } from "@patternfly/react-core";
 import React, { useEffect, useMemo } from "react";
 import { FormProvider, SubmitHandler, useForm } from "react-hook-form";
@@ -15,6 +14,7 @@ import { Link, useHistory, useParams } from "react-router-dom";
 import { KeyValueInput } from "../../components/key-value-form/KeyValueInput";
 import { FormAccess } from "../../components/form-access/FormAccess";
 import { HelpItem } from "../../components/help-enabler/HelpItem";
+import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 import { ViewHeader } from "../../components/view-header/ViewHeader";
 import { useRealm } from "../../context/realm-context/RealmContext";
 import type { EditAttributesGroupParams } from "../routes/EditAttributesGroup";
@@ -128,7 +128,7 @@ export default function AttributesGroupForm() {
               />
             }
           >
-            <TextInput
+            <KeycloakTextInput
               ref={form.register({ required: true })}
               type="text"
               id="kc-name"
@@ -149,7 +149,7 @@ export default function AttributesGroupForm() {
               />
             }
           >
-            <TextInput
+            <KeycloakTextInput
               ref={form.register()}
               type="text"
               id="kc-display-header"
@@ -166,7 +166,7 @@ export default function AttributesGroupForm() {
               />
             }
           >
-            <TextInput
+            <KeycloakTextInput
               ref={form.register()}
               type="text"
               id="kc-display-description"

src/realm-settings/user-profile/attribute/AttributeGeneralSettings.tsx

@@ -9,12 +9,12 @@ import {
   SelectOption,
   SelectVariant,
   Switch,
-  TextInput,
 } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
 import { HelpItem } from "../../../components/help-enabler/HelpItem";
 import { Controller, useFormContext, useWatch } from "react-hook-form";
 import { FormAccess } from "../../../components/form-access/FormAccess";
+import { KeycloakTextInput } from "../../../components/keycloak-text-input/KeycloakTextInput";
 import { useAdminClient, useFetch } from "../../../context/auth/AdminClient";
 import type ClientScopeRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientScopeRepresentation";
 import type { AttributeParams } from "../../routes/Attribute";
@@ -83,7 +83,7 @@ export const AttributeGeneralSettings = () => {
         validated={form.errors.name ? "error" : "default"}
         helperTextInvalid={form.errors.name?.message}
       >
-        <TextInput
+        <KeycloakTextInput
           isRequired
           type="text"
           id="kc-attribute-name"
@@ -110,7 +110,7 @@ export const AttributeGeneralSettings = () => {
         }
         fieldId="kc-attribute-display-name"
       >
-        <TextInput
+        <KeycloakTextInput
           type="text"
           id="kc-attribute-display-name"
           name="displayName"

src/realm/add/NewRealmForm.tsx

@@ -5,7 +5,6 @@ import {
   FormGroup,
   PageSection,
   Switch,
-  TextInput,
 } from "@patternfly/react-core";
 import type RealmRepresentation from "@keycloak/keycloak-admin-client/lib/defs/realmRepresentation";
 import React from "react";
@@ -16,6 +15,7 @@ import { useAlerts } from "../../components/alert/Alerts";
 import { FormAccess } from "../../components/form-access/FormAccess";
 import { JsonFileUpload } from "../../components/json-file-upload/JsonFileUpload";
 import { ViewHeader } from "../../components/view-header/ViewHeader";
+import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 import { useAdminClient } from "../../context/auth/AdminClient";
 import { useRealms } from "../../context/RealmsContext";
 import { useWhoAmI } from "../../context/whoami/WhoAmI";
@@ -79,7 +79,7 @@ export default function NewRealmForm() {
             validated={errors.realm ? "error" : "default"}
             helperTextInvalid={t("common:required")}
           >
-            <TextInput
+            <KeycloakTextInput
               isRequired
               type="text"
               id="kc-realm-name"

src/sessions/RevocationModal.tsx

@@ -8,7 +8,6 @@ import {
   Modal,
   ModalVariant,
   TextContent,
-  TextInput,
   ValidatedOptions,
 } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
@@ -20,6 +19,7 @@ import { useAdminClient, useFetch } from "../context/auth/AdminClient";
 import { useRealm } from "../context/realm-context/RealmContext";
 import type ClientRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientRepresentation";
 import { useAlerts } from "../components/alert/Alerts";
+import { KeycloakTextInput } from "../components/keycloak-text-input/KeycloakTextInput";
 import type GlobalRequestResult from "@keycloak/keycloak-admin-client/lib/defs/globalRequestResult";
 
 type RevocationModalProps = {
@@ -201,7 +201,7 @@ export const RevocationModal = ({
             errors.email ? ValidatedOptions.error : ValidatedOptions.default
           }
         >
-          <TextInput
+          <KeycloakTextInput
             data-testid="not-before-input"
             ref={register({ required: true, pattern: emailRegexPattern })}
             autoFocus

src/user-federation/custom/CustomProviderSettings.tsx

@@ -8,13 +8,13 @@ import {
   Button,
   FormGroup,
   PageSection,
-  TextInput,
 } from "@patternfly/react-core";
 
 import type ComponentRepresentation from "@keycloak/keycloak-admin-client/lib/defs/componentRepresentation";
 import type { ProviderRouteParams } from "../routes/NewProvider";
 import { HelpItem } from "../../components/help-enabler/HelpItem";
 import { FormAccess } from "../../components/form-access/FormAccess";
+import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 import { toUserFederation } from "../routes/UserFederation";
 import { useAdminClient, useFetch } from "../../context/auth/AdminClient";
 import { useRealm } from "../../context/realm-context/RealmContext";
@@ -104,7 +104,7 @@ export default function CustomProviderSettings() {
             fieldId="kc-console-display-name"
             isRequired
           >
-            <TextInput
+            <KeycloakTextInput
               isRequired
               type="text"
               id="kc-console-display-name"

src/user-federation/kerberos/KerberosSettingsRequired.tsx

@@ -5,7 +5,6 @@ import {
   SelectOption,
   SelectVariant,
   Switch,
-  TextInput,
 } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
 import { UseFormMethods, Controller, useWatch } from "react-hook-form";
@@ -16,6 +15,7 @@ import { useRealm } from "../../context/realm-context/RealmContext";
 import { HelpItem } from "../../components/help-enabler/HelpItem";
 import { isEqual } from "lodash-es";
 import { WizardSectionHeader } from "../../components/wizard-section-header/WizardSectionHeader";
+import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 import { useAdminClient, useFetch } from "../../context/auth/AdminClient";
 
 export type KerberosSettingsRequiredProps = {
@@ -74,7 +74,7 @@ export const KerberosSettingsRequired = ({
           helperTextInvalid={form.errors.name?.message}
         >
           {/* These hidden fields are required so data object written back matches data retrieved */}
-          <TextInput
+          <KeycloakTextInput
             hidden
             type="text"
             id="kc-console-providerId"
@@ -82,7 +82,7 @@ export const KerberosSettingsRequired = ({
             defaultValue="kerberos"
             ref={form.register}
           />
-          <TextInput
+          <KeycloakTextInput
             hidden
             type="text"
             id="kc-console-providerType"
@@ -90,7 +90,7 @@ export const KerberosSettingsRequired = ({
             defaultValue="org.keycloak.storage.UserStorageProvider"
             ref={form.register}
           />
-          <TextInput
+          <KeycloakTextInput
             hidden
             type="text"
             id="kc-console-parentId"
@@ -99,7 +99,7 @@ export const KerberosSettingsRequired = ({
             ref={form.register}
           />
 
-          <TextInput
+          <KeycloakTextInput
             isRequired
             type="text"
             id="kc-console-name"
@@ -130,7 +130,7 @@ export const KerberosSettingsRequired = ({
           }
           helperTextInvalid={form.errors.config?.kerberosRealm?.[0].message}
         >
-          <TextInput
+          <KeycloakTextInput
             isRequired
             type="text"
             id="kc-kerberos-realm"
@@ -163,7 +163,7 @@ export const KerberosSettingsRequired = ({
           }
           helperTextInvalid={form.errors.config?.serverPrincipal?.[0].message}
         >
-          <TextInput
+          <KeycloakTextInput
             isRequired
             type="text"
             id="kc-server-principal"
@@ -194,7 +194,7 @@ export const KerberosSettingsRequired = ({
           validated={form.errors.config?.keyTab?.[0] ? "error" : "default"}
           helperTextInvalid={form.errors.config?.keyTab?.[0].message}
         >
-          <TextInput
+          <KeycloakTextInput
             isRequired
             type="text"
             id="kc-key-tab"

src/user-federation/ldap/LdapSettingsConnection.tsx

@@ -6,7 +6,6 @@ import {
   SelectOption,
   SelectVariant,
   Switch,
-  TextInput,
   ValidatedOptions,
 } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
@@ -22,6 +21,7 @@ import { PasswordInput } from "../../components/password-input/PasswordInput";
 import { useAdminClient } from "../../context/auth/AdminClient";
 import { useRealm } from "../../context/realm-context/RealmContext";
 import { useAlerts } from "../../components/alert/Alerts";
+import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 
 export type LdapSettingsConnectionProps = {
   form: UseFormMethods;
@@ -118,7 +118,7 @@ export const LdapSettingsConnection = ({
           }
           helperTextInvalid={form.errors.config?.connectionUrl?.[0].message}
         >
-          <TextInput
+          <KeycloakTextInput
             isRequired
             type="text"
             id="kc-console-connection-url"
@@ -236,7 +236,7 @@ export const LdapSettingsConnection = ({
           }
           fieldId="kc-console-connection-timeout"
         >
-          <TextInput
+          <KeycloakTextInput
             type="number"
             min={0}
             id="kc-console-connection-timeout"
@@ -312,7 +312,7 @@ export const LdapSettingsConnection = ({
               }
               isRequired
             >
-              <TextInput
+              <KeycloakTextInput
                 type="text"
                 id="kc-console-bind-dn"
                 data-testid="ldap-bind-dn"

src/user-federation/ldap/LdapSettingsGeneral.tsx

@@ -3,7 +3,6 @@ import {
   Select,
   SelectOption,
   SelectVariant,
-  TextInput,
 } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
 import React, { useState } from "react";
@@ -13,6 +12,7 @@ import { FormAccess } from "../../components/form-access/FormAccess";
 import { useRealm } from "../../context/realm-context/RealmContext";
 
 import { WizardSectionHeader } from "../../components/wizard-section-header/WizardSectionHeader";
+import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 import { useAdminClient, useFetch } from "../../context/auth/AdminClient";
 
 export type LdapSettingsGeneralProps = {
@@ -117,7 +117,7 @@ export const LdapSettingsGeneral = ({
           helperTextInvalid={form.errors.name?.message}
         >
           {/* These hidden fields are required so data object written back matches data retrieved */}
-          <TextInput
+          <KeycloakTextInput
             hidden
             type="text"
             id="kc-console-provider-id"
@@ -125,7 +125,7 @@ export const LdapSettingsGeneral = ({
             defaultValue="ldap"
             ref={form.register}
           />
-          <TextInput
+          <KeycloakTextInput
             hidden
             type="text"
             id="kc-console-provider-type"
@@ -133,7 +133,7 @@ export const LdapSettingsGeneral = ({
             defaultValue="org.keycloak.storage.UserStorageProvider"
             ref={form.register}
           />
-          <TextInput
+          <KeycloakTextInput
             hidden
             type="text"
             id="kc-console-parentId"
@@ -141,7 +141,7 @@ export const LdapSettingsGeneral = ({
             defaultValue={realm}
             ref={form.register}
           />
-          <TextInput
+          <KeycloakTextInput
             isRequired
             type="text"
             id="kc-console-display-name"

src/user-federation/ldap/LdapSettingsKerberosIntegration.tsx

@@ -1,10 +1,11 @@
-import { FormGroup, Switch, TextInput } from "@patternfly/react-core";
+import { FormGroup, Switch } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
 import React from "react";
 import { HelpItem } from "../../components/help-enabler/HelpItem";
 import { UseFormMethods, Controller, useWatch } from "react-hook-form";
 import { FormAccess } from "../../components/form-access/FormAccess";
 import { WizardSectionHeader } from "../../components/wizard-section-header/WizardSectionHeader";
+import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 
 export type LdapSettingsKerberosIntegrationProps = {
   form: UseFormMethods;
@@ -83,7 +84,7 @@ export const LdapSettingsKerberosIntegration = ({
               }
               helperTextInvalid={form.errors.config?.kerberosRealm?.[0].message}
             >
-              <TextInput
+              <KeycloakTextInput
                 isRequired
                 type="text"
                 id="kc-kerberos-realm"
@@ -118,7 +119,7 @@ export const LdapSettingsKerberosIntegration = ({
                 form.errors.config?.serverPrincipal?.[0].message
               }
             >
-              <TextInput
+              <KeycloakTextInput
                 isRequired
                 type="text"
                 id="kc-server-principal"
@@ -149,7 +150,7 @@ export const LdapSettingsKerberosIntegration = ({
               validated={form.errors.config?.keyTab?.[0] ? "error" : "default"}
               helperTextInvalid={form.errors.config?.keyTab?.[0].message}
             >
-              <TextInput
+              <KeycloakTextInput
                 isRequired
                 type="text"
                 id="kc-key-tab"

src/user-federation/ldap/LdapSettingsSearching.tsx

@@ -4,7 +4,6 @@ import {
   SelectOption,
   SelectVariant,
   Switch,
-  TextInput,
 } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
 import React, { useState } from "react";
@@ -12,6 +11,7 @@ import { HelpItem } from "../../components/help-enabler/HelpItem";
 import { UseFormMethods, Controller } from "react-hook-form";
 import { FormAccess } from "../../components/form-access/FormAccess";
 import { WizardSectionHeader } from "../../components/wizard-section-header/WizardSectionHeader";
+import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 
 export type LdapSettingsSearchingProps = {
   form: UseFormMethods;
@@ -101,7 +101,7 @@ export const LdapSettingsSearching = ({
           validated={form.errors.config?.usersDn?.[0] ? "error" : "default"}
           helperTextInvalid={form.errors.config?.usersDn?.[0].message}
         >
-          <TextInput
+          <KeycloakTextInput
             isRequired
             type="text"
             defaultValue=""
@@ -134,7 +134,7 @@ export const LdapSettingsSearching = ({
             form.errors.config?.usernameLDAPAttribute?.[0].message
           }
         >
-          <TextInput
+          <KeycloakTextInput
             isRequired
             type="text"
             defaultValue="cn"
@@ -169,7 +169,7 @@ export const LdapSettingsSearching = ({
           }
           helperTextInvalid={form.errors.config?.rdnLDAPAttribute?.[0].message}
         >
-          <TextInput
+          <KeycloakTextInput
             isRequired
             type="text"
             defaultValue="cn"
@@ -202,7 +202,7 @@ export const LdapSettingsSearching = ({
           }
           helperTextInvalid={form.errors.config?.uuidLDAPAttribute?.[0].message}
         >
-          <TextInput
+          <KeycloakTextInput
             isRequired
             type="text"
             defaultValue="objectGUID"
@@ -235,7 +235,7 @@ export const LdapSettingsSearching = ({
           }
           helperTextInvalid={form.errors.config?.userObjectClasses?.[0].message}
         >
-          <TextInput
+          <KeycloakTextInput
             isRequired
             type="text"
             defaultValue="person, organizationalPerson, user"
@@ -271,7 +271,7 @@ export const LdapSettingsSearching = ({
             form.errors.config?.customUserSearchFilter?.[0].message
           }
         >
-          <TextInput
+          <KeycloakTextInput
             type="text"
             id="kc-user-ldap-filter"
             data-testid="user-ldap-filter"
@@ -339,7 +339,7 @@ export const LdapSettingsSearching = ({
           }
           fieldId="kc-read-timeout"
         >
-          <TextInput
+          <KeycloakTextInput
             type="number"
             min={0}
             id="kc-read-timeout"

src/user-federation/ldap/LdapSettingsSynchronization.tsx

@@ -1,10 +1,11 @@
-import { FormGroup, Switch, TextInput } from "@patternfly/react-core";
+import { FormGroup, Switch } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
 import React from "react";
 import { HelpItem } from "../../components/help-enabler/HelpItem";
 import { UseFormMethods, Controller } from "react-hook-form";
 import { FormAccess } from "../../components/form-access/FormAccess";
 import { WizardSectionHeader } from "../../components/wizard-section-header/WizardSectionHeader";
+import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 
 export type LdapSettingsSynchronizationProps = {
   form: UseFormMethods;
@@ -72,7 +73,7 @@ export const LdapSettingsSynchronization = ({
           }
           fieldId="kc-batch-size"
         >
-          <TextInput
+          <KeycloakTextInput
             type="number"
             min={0}
             id="kc-batch-size"
@@ -122,7 +123,7 @@ export const LdapSettingsSynchronization = ({
             }
             fieldId="kc-full-sync-period"
           >
-            <TextInput
+            <KeycloakTextInput
               type="number"
               min={-1}
               defaultValue={604800}
@@ -174,7 +175,7 @@ export const LdapSettingsSynchronization = ({
             fieldId="kc-changed-users-sync-period"
             hasNoPaddingTop
           >
-            <TextInput
+            <KeycloakTextInput
               type="number"
               min={-1}
               defaultValue={86400}

src/user-federation/ldap/mappers/LdapMapperDetails.tsx

@@ -9,7 +9,6 @@ import {
   Select,
   SelectOption,
   SelectVariant,
-  TextInput,
   ValidatedOptions,
 } from "@patternfly/react-core";
 import { convertFormValuesToObject, convertToFormValues } from "../../../util";
@@ -27,6 +26,7 @@ import type ComponentTypeRepresentation from "@keycloak/keycloak-admin-client/li
 import { DynamicComponents } from "../../../components/dynamic/DynamicComponents";
 import { useRealm } from "../../../context/realm-context/RealmContext";
 import { KeycloakSpinner } from "../../../components/keycloak-spinner/KeycloakSpinner";
+import { KeycloakTextInput } from "../../../components/keycloak-text-input/KeycloakTextInput";
 import { toUserFederationLdap } from "../../routes/UserFederationLdap";
 
 export default function LdapMapperDetails() {
@@ -134,7 +134,7 @@ export default function LdapMapperDetails() {
         <FormAccess role="manage-realm" isHorizontal>
           {!isNew && (
             <FormGroup label={t("common:id")} fieldId="kc-ldap-mapper-id">
-              <TextInput
+              <KeycloakTextInput
                 isDisabled
                 type="text"
                 id="kc-ldap-mapper-id"
@@ -155,7 +155,7 @@ export default function LdapMapperDetails() {
             fieldId="kc-ldap-mapper-name"
             isRequired
           >
-            <TextInput
+            <KeycloakTextInput
               isDisabled={!isNew}
               isRequired
               type="text"
@@ -169,7 +169,7 @@ export default function LdapMapperDetails() {
                   : ValidatedOptions.default
               }
             />
-            <TextInput
+            <KeycloakTextInput
               hidden
               defaultValue={isNew ? id : mapping ? mapping.parentId : ""}
               type="text"
@@ -178,7 +178,7 @@ export default function LdapMapperDetails() {
               name="parentId"
               ref={form.register}
             />
-            <TextInput
+            <KeycloakTextInput
               hidden
               defaultValue="org.keycloak.storage.ldap.mappers.LDAPStorageMapper"
               type="text"
@@ -200,7 +200,7 @@ export default function LdapMapperDetails() {
               fieldId="kc-ldap-mapper-type"
               isRequired
             >
-              <TextInput
+              <KeycloakTextInput
                 isDisabled={!isNew}
                 isRequired
                 type="text"

src/user/SearchUser.tsx

@@ -7,13 +7,14 @@ import {
   EmptyStateBody,
   Form,
   InputGroup,
-  TextInput,
   Title,
 } from "@patternfly/react-core";
 import { SearchIcon } from "@patternfly/react-icons";
 import { useForm } from "react-hook-form";
 import { useHistory, useRouteMatch } from "react-router-dom";
 
+import { KeycloakTextInput } from "../components/keycloak-text-input/KeycloakTextInput";
+
 type SearchUserProps = {
   onSearch: (search: string) => void;
 };
@@ -34,7 +35,7 @@ export const SearchUser = ({ onSearch }: SearchUserProps) => {
       <EmptyStateBody>
         <Form onSubmit={handleSubmit((form) => onSearch(form.search))}>
           <InputGroup>
-            <TextInput
+            <KeycloakTextInput
               type="text"
               id="kc-user-search"
               name="search"

src/user/UserForm.tsx

@@ -10,7 +10,6 @@ import {
   Select,
   SelectOption,
   Switch,
-  TextInput,
 } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
 import { Controller, useFormContext } from "react-hook-form";
@@ -23,6 +22,7 @@ import { useRealm } from "../context/realm-context/RealmContext";
 import { useAdminClient, useFetch } from "../context/auth/AdminClient";
 import type GroupRepresentation from "@keycloak/keycloak-admin-client/lib/defs/groupRepresentation";
 import { useAlerts } from "../components/alert/Alerts";
+import { KeycloakTextInput } from "../components/keycloak-text-input/KeycloakTextInput";
 import { emailRegexPattern } from "../util";
 import { GroupPickerDialog } from "../components/group/GroupPickerDialog";
 import moment from "moment";
@@ -173,10 +173,15 @@ export const UserForm = ({
       {user?.id && (
         <>
           <FormGroup label={t("common:id")} fieldId="kc-id" isRequired>
-            <TextInput id={user.id} value={user.id} type="text" isReadOnly />
+            <KeycloakTextInput
+              id={user.id}
+              value={user.id}
+              type="text"
+              isReadOnly
+            />
           </FormGroup>
           <FormGroup label={t("createdAt")} fieldId="kc-created-at" isRequired>
-            <TextInput
+            <KeycloakTextInput
               value={moment(user.createdTimestamp).format(
                 "MM/DD/YY hh:MM:ss A"
               )}
@@ -196,7 +201,7 @@ export const UserForm = ({
           validated={errors.username ? "error" : "default"}
           helperTextInvalid={t("common:required")}
         >
-          <TextInput
+          <KeycloakTextInput
             ref={register()}
             type="text"
             id="kc-username"
@@ -211,7 +216,7 @@ export const UserForm = ({
         validated={errors.email ? "error" : "default"}
         helperTextInvalid={t("users:emailInvalid")}
       >
-        <TextInput
+        <KeycloakTextInput
           ref={register({
             pattern: emailRegexPattern,
           })}
@@ -256,7 +261,7 @@ export const UserForm = ({
         validated={errors.firstName ? "error" : "default"}
         helperTextInvalid={t("common:required")}
       >
-        <TextInput
+        <KeycloakTextInput
           ref={register()}
           data-testid="firstName-input"
           type="text"
@@ -269,7 +274,7 @@ export const UserForm = ({
         fieldId="kc-name"
         validated={errors.lastName ? "error" : "default"}
       >
-        <TextInput
+        <KeycloakTextInput
           ref={register()}
           data-testid="lastName-input"
           type="text"

src/user/UserIdPModal.tsx

@@ -7,7 +7,6 @@ import {
   FormGroup,
   Modal,
   ModalVariant,
-  TextInput,
   ValidatedOptions,
 } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
@@ -20,6 +19,7 @@ import { capitalize } from "lodash-es";
 import { useParams } from "react-router-dom";
 import type FederatedIdentityRepresentation from "@keycloak/keycloak-admin-client/lib/defs/federatedIdentityRepresentation";
 import type { UserParams } from "./routes/User";
+import { KeycloakTextInput } from "../components/keycloak-text-input/KeycloakTextInput";
 
 type UserIdpModalProps = {
   federatedId?: string;
@@ -104,7 +104,7 @@ export const UserIdpModal = ({
               : ValidatedOptions.default
           }
         >
-          <TextInput
+          <KeycloakTextInput
             data-testid="idpNameInput"
             aria-label="Identity provider name input"
             ref={register({ required: true })}
@@ -132,7 +132,7 @@ export const UserIdpModal = ({
           }
           isRequired
         >
-          <TextInput
+          <KeycloakTextInput
             data-testid="userIdInput"
             aria-label="user ID input"
             ref={register({ required: true })}
@@ -156,7 +156,7 @@ export const UserIdpModal = ({
           }
           isRequired
         >
-          <TextInput
+          <KeycloakTextInput
             data-testid="usernameInput"
             aria-label="username input"
             ref={register({ required: true })}

src/user/user-credentials/InlineLabelEdit.tsx

@@ -1,18 +1,13 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { useForm } from "react-hook-form";
-import {
+import { AlertVariant, Button, Form, FormGroup } from "@patternfly/react-core";
-  AlertVariant,
-  Button,
-  Form,
-  FormGroup,
-  TextInput,
-} from "@patternfly/react-core";
 import { CheckIcon, PencilAltIcon, TimesIcon } from "@patternfly/react-icons";
 
 import type CredentialRepresentation from "@keycloak/keycloak-admin-client/lib/defs/credentialRepresentation";
 import { useAdminClient } from "../../context/auth/AdminClient";
 import { useAlerts } from "../../components/alert/Alerts";
+import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
 
 type UserLabelForm = {
   userLabel: string;
@@ -63,7 +58,7 @@ export const InlineLabelEdit = ({
         <div className="kc-form-group-userLabel">
           {isEditable ? (
             <>
-              <TextInput
+              <KeycloakTextInput
                 name="userLabel"
                 data-testid="userLabelFld"
                 defaultValue={credential.userLabel}