Replace text areas with KeycloakTextArea (#2617)

src/authentication/form/NameDescription.tsx

@@ -1,10 +1,11 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { useFormContext } from "react-hook-form";
-import { FormGroup, TextArea, ValidatedOptions } from "@patternfly/react-core";
+import { FormGroup, ValidatedOptions } from "@patternfly/react-core";
 
 import { HelpItem } from "../../components/help-enabler/HelpItem";
 import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
+import { KeycloakTextArea } from "../../components/keycloak-text-area/KeycloakTextArea";
 
 export const NameDescription = () => {
   const { t } = useTranslation("authentication");
@@ -52,7 +53,7 @@ export const NameDescription = () => {
         }
         helperTextInvalid={errors.description?.message}
       >
-        <TextArea
+        <KeycloakTextArea
           ref={register({
             maxLength: {
               value: 255,

src/client-scopes/details/ScopeForm.tsx

@@ -11,7 +11,6 @@ import {
   Switch,
   ActionGroup,
   Button,
-  TextArea,
 } from "@patternfly/react-core";
 
 import type ClientScopeRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientScopeRepresentation";
@@ -28,6 +27,7 @@ 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";
+import { KeycloakTextArea } from "../../components/keycloak-text-area/KeycloakTextArea";
 
 type ScopeFormProps = {
   clientScope: ClientScopeRepresentation;
@@ -236,7 +236,7 @@ export const ScopeForm = ({ clientScope, save }: ScopeFormProps) => {
           }
           fieldId="kc-consent-screen-text"
         >
-          <TextArea
+          <KeycloakTextArea
             ref={register}
             type="text"
             id="kc-consent-screen-text"

src/clients/ClientDescription.tsx

@@ -1,17 +1,13 @@
 import React from "react";
 import { Controller, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import {
-  FormGroup,
-  Switch,
-  TextArea,
-  ValidatedOptions,
-} from "@patternfly/react-core";
+import { FormGroup, Switch, 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";
+import { KeycloakTextArea } from "../components/keycloak-text-area/KeycloakTextArea";
 
 type ClientDescriptionProps = {
   protocol?: string;
@@ -76,7 +72,7 @@ export const ClientDescription = ({ protocol }: ClientDescriptionProps) => {
         }
         helperTextInvalid={errors.description?.message}
       >
-        <TextArea
+        <KeycloakTextArea
           ref={register({
             maxLength: {
               value: 255,

src/clients/ClientSettings.tsx

@@ -5,7 +5,6 @@ import {
   FormGroup,
   Form,
   Switch,
-  TextArea,
   Select,
   SelectVariant,
   SelectOption,
@@ -20,6 +19,7 @@ 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 { KeycloakTextArea } from "../components/keycloak-text-area/KeycloakTextArea";
 import { useServerInfo } from "../context/server-info/ServerInfoProvider";
 import { SaveReset } from "./advanced/SaveReset";
 import { SamlConfig } from "./add/SamlConfig";
@@ -356,7 +356,7 @@ export const ClientSettings = ({
           }
           fieldId="kc-consent-screen-text"
         >
-          <TextArea
+          <KeycloakTextArea
             id="kc-consent-screen-text"
             name="attributes.consent.screen.text"
             ref={register}

src/clients/authorization/AuthorizationExport.tsx

@@ -5,7 +5,6 @@ import {
   PageSection,
   ActionGroup,
   Button,
-  TextArea,
   AlertVariant,
 } from "@patternfly/react-core";
 
@@ -19,6 +18,7 @@ import { useAlerts } from "../../components/alert/Alerts";
 import type { ClientParams } from "../routes/Client";
 import type ResourceServerRepresentation from "@keycloak/keycloak-admin-client/lib/defs/resourceServerRepresentation";
 import { KeycloakSpinner } from "../../components/keycloak-spinner/KeycloakSpinner";
+import { KeycloakTextArea } from "../../components/keycloak-text-area/KeycloakTextArea";
 
 import "./authorization-details.css";
 
@@ -76,7 +76,7 @@ export const AuthorizationExport = () => {
           }
           fieldId="client"
         >
-          <TextArea
+          <KeycloakTextArea
             id="authorizationDetails"
             readOnly
             resizeOrientation="vertical"

src/clients/authorization/PermissionDetails.tsx

@@ -13,7 +13,6 @@ import {
   Radio,
   SelectVariant,
   Switch,
-  TextArea,
 } from "@patternfly/react-core";
 
 import type PolicyRepresentation from "@keycloak/keycloak-admin-client/lib/defs/policyRepresentation";
@@ -34,6 +33,7 @@ import { ScopeSelect } from "./ScopeSelect";
 import { toUpperCase } from "../../util";
 import { KeycloakSpinner } from "../../components/keycloak-spinner/KeycloakSpinner";
 import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
+import { KeycloakTextArea } from "../../components/keycloak-text-area/KeycloakTextArea";
 
 const DECISION_STRATEGIES = ["UNANIMOUS", "AFFIRMATIVE", "CONSENSUS"] as const;
 
@@ -230,7 +230,7 @@ export default function PermissionDetails() {
               validated={errors.description ? "error" : "default"}
               helperTextInvalid={errors.description?.message}
             >
-              <TextArea
+              <KeycloakTextArea
                 id="description"
                 name="description"
                 ref={register({

src/clients/authorization/policy/NameDescription.tsx

@@ -1,10 +1,11 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { useFormContext } from "react-hook-form";
-import { FormGroup, TextArea, ValidatedOptions } from "@patternfly/react-core";
+import { FormGroup, ValidatedOptions } from "@patternfly/react-core";
 
 import { HelpItem } from "../../../components/help-enabler/HelpItem";
 import { KeycloakTextInput } from "../../../components/keycloak-text-input/KeycloakTextInput";
+import { KeycloakTextArea } from "../../../components/keycloak-text-area/KeycloakTextArea";
 
 type NameDescriptionProps = {
   prefix: string;
@@ -59,7 +60,7 @@ export const NameDescription = ({ prefix }: NameDescriptionProps) => {
         }
         helperTextInvalid={errors.description?.message}
       >
-        <TextArea
+        <KeycloakTextArea
           ref={register({
             maxLength: {
               value: 255,

src/clients/keys/Certificate.tsx

@@ -1,9 +1,10 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { FormGroup, GenerateId, TextArea } from "@patternfly/react-core";
+import { FormGroup, GenerateId } from "@patternfly/react-core";
 
 import type CertificateRepresentation from "@keycloak/keycloak-admin-client/lib/defs/certificateRepresentation";
 import { HelpItem } from "../../components/help-enabler/HelpItem";
+import { KeycloakTextArea } from "../../components/keycloak-text-area/KeycloakTextArea";
 
 type CertificateProps = Omit<CertificateDisplayProps, "id"> & {
   plain?: boolean;
@@ -15,7 +16,7 @@ type CertificateDisplayProps = {
 };
 
 const CertificateDisplay = ({ id, keyInfo }: CertificateDisplayProps) => (
-  <TextArea
+  <KeycloakTextArea
     readOnly
     rows={5}
     id={id}

src/clients/scopes/GeneratedCodeTab.tsx

@@ -5,12 +5,12 @@ import {
   CodeBlockAction,
   EmptyState,
   EmptyStateBody,
-  TextArea,
   Title,
 } from "@patternfly/react-core";
 
 import type UserRepresentation from "@keycloak/keycloak-admin-client/lib/defs/userRepresentation";
 import { CopyToClipboardButton } from "./CopyToClipboardButton";
+import { KeycloakTextArea } from "../../components/keycloak-text-area/KeycloakTextArea";
 
 type GeneratedCodeTabProps = {
   user?: UserRepresentation;
@@ -34,7 +34,7 @@ export const GeneratedCodeTab = ({
         </CodeBlockAction>
       }
     >
-      <TextArea id={`text-area-${label}`} rows={20} value={text} />
+      <KeycloakTextArea id={`text-area-${label}`} rows={20} value={text} />
     </CodeBlock>
   ) : (
     <EmptyState variant="large">

src/components/download-dialog/DownloadDialog.tsx

@@ -9,7 +9,6 @@ import {
   SelectVariant,
   Stack,
   StackItem,
-  TextArea,
 } from "@patternfly/react-core";
 import FileSaver from "file-saver";
 import React, { useEffect, useMemo, useState } from "react";
@@ -20,6 +19,7 @@ import { prettyPrintJSON } from "../../util";
 import { ConfirmDialogModal } from "../confirm-dialog/ConfirmDialog";
 import { useHelp } from "../help-enabler/HelpHeader";
 import { HelpItem } from "../help-enabler/HelpItem";
+import { KeycloakTextArea } from "../keycloak-text-area/KeycloakTextArea";
 
 type DownloadDialogProps = {
   id: string;
@@ -158,7 +158,7 @@ export const DownloadDialog = ({
                   />
                 }
               >
-                <TextArea
+                <KeycloakTextArea
                   id="details"
                   readOnly
                   rows={12}

src/components/keycloak-text-area/KeycloakTextArea.tsx

@@ -0,0 +1,29 @@
+import { TextArea, TextAreaProps } from "@patternfly/react-core";
+import React, { ComponentProps, forwardRef, HTMLProps } from "react";
+
+// PatternFly changes the signature of the 'onChange' handler for textarea elements.
+// This causes issues with React Hook Form as it expects the default signature for a textarea element.
+// So we have to create this wrapper component that takes care of converting these signatures for us.
+
+export type KeycloakTextAreaProps = Omit<
+  ComponentProps<typeof TextArea>,
+  "onChange"
+> &
+  Pick<HTMLProps<HTMLTextAreaElement>, "onChange">;
+
+export const KeycloakTextArea = forwardRef<
+  // TODO: This is typed incorrectly and will have to be replaced with 'HTMLTextAreaElement'.
+  // More information: https://github.com/patternfly/patternfly-react/pull/7397
+  HTMLInputElement,
+  KeycloakTextAreaProps
+>(({ onChange, ...props }, ref) => {
+  const onChangeForward: TextAreaProps["onChange"] = (_, event) =>
+    onChange?.(event);
+
+  return <TextArea {...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.
+KeycloakTextArea.displayName = "TextArea";

src/realm-roles/RealmRoleForm.tsx

@@ -4,7 +4,6 @@ import {
   Button,
   FormGroup,
   PageSection,
-  TextArea,
   ValidatedOptions,
 } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
@@ -13,6 +12,7 @@ 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 { KeycloakTextArea } from "../components/keycloak-text-area/KeycloakTextArea";
 import { useRealm } from "../context/realm-context/RealmContext";
 import { useHistory } from "react-router-dom";
 
@@ -72,7 +72,7 @@ export const RealmRoleForm = ({
             }
             helperTextInvalid={errors.description?.message}
           >
-            <TextArea
+            <KeycloakTextArea
               name="description"
               aria-label="description"
               isDisabled={getValues().name?.includes("default-roles")}

src/realm-settings/ClientProfileForm.tsx

@@ -16,7 +16,6 @@ import {
   FormGroup,
   PageSection,
   Text,
-  TextArea,
   TextVariants,
   ValidatedOptions,
 } from "@patternfly/react-core";
@@ -30,6 +29,7 @@ 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 { KeycloakTextArea } from "../components/keycloak-text-area/KeycloakTextArea";
 import { PlusCircleIcon, TrashIcon } from "@patternfly/react-icons";
 import "./realm-settings-section.css";
 import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
@@ -247,7 +247,7 @@ export default function ClientProfileForm() {
             />
           </FormGroup>
           <FormGroup label={t("common:description")} fieldId="kc-description">
-            <TextArea
+            <KeycloakTextArea
               ref={register()}
               name="description"
               type="text"

src/realm-settings/NewClientPolicyForm.tsx

@@ -16,7 +16,6 @@ import {
   FormGroup,
   PageSection,
   Text,
-  TextArea,
   TextVariants,
   ValidatedOptions,
 } from "@patternfly/react-core";
@@ -30,6 +29,7 @@ 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 { KeycloakTextArea } from "../components/keycloak-text-area/KeycloakTextArea";
 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";
@@ -475,7 +475,7 @@ export default function NewClientPolicyForm() {
             />
           </FormGroup>
           <FormGroup label={t("common:description")} fieldId="kc-description">
-            <TextArea
+            <KeycloakTextArea
               name="description"
               aria-label={t("description")}
               ref={form.register()}