import React, { forwardRef, TextareaHTMLAttributes, useEffect, useRef, useState, } from "react"; import classNames from "classnames"; import { Field, FieldProps } from ":/components/Forms/Field"; import { LabelledBox } from ":/components/Forms/LabelledBox"; import { randomString } from ":/utils"; export type TextAreaProps = TextareaHTMLAttributes & FieldProps & { label?: string; charCounter?: boolean; charCounterMax?: number; }; export const TextArea = forwardRef( ({ label, id, defaultValue, charCounter, charCounterMax, ...props }, ref) => { const areaRef = useRef(null); const [inputFocus, setInputFocus] = useState(false); const [value, setValue] = useState(defaultValue || props.value || ""); const [labelAsPlaceholder, setLabelAsPlaceholder] = useState(!value); const idToUse = useRef(id || randomString()); const rightTextToUse = charCounter ? `${value.toString().length}/${charCounterMax}` : props.rightText; useEffect(() => { if (inputFocus) { setLabelAsPlaceholder(false); return; } setLabelAsPlaceholder(!value); }, [inputFocus, value]); // If the input is used as a controlled component, we need to update the local value. useEffect(() => { if (defaultValue !== undefined) { return; } setValue(props.value || ""); }, [props.value]); const { fullWidth, rightText, text, textItems, ...areaProps } = props; return ( {/* We disabled linting for this specific line because we consider that the onClick props is only used for */} {/* mouse users, so this do not engender any issue for accessibility. */} {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
areaRef.current?.focus()} >