30 lines
1.3 KiB
TypeScript
30 lines
1.3 KiB
TypeScript
|
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";
|