Add textarea component

i18n/messages/en.json

@@ -394,6 +394,16 @@
     "description": "Tooltip for 'maxNumberOfFiles' builder field",
     "originalDefault": "The maximum number of files that can be uploaded."
   },
+  "KwatvH": {
+    "defaultMessage": "The number of rows for this text area.",
+    "description": "Tooltip for 'NumberOfRows' builder field",
+    "originalDefault": "The number of rows for this text area."
+  },
+  "LJckD5": {
+    "defaultMessage": "Auto Expand",
+    "description": "Label for 'AutoExpand' builder field",
+    "originalDefault": "Auto Expand"
+  },
   "Nsifca": {
     "defaultMessage": "The maximum date that can be picked.",
     "description": "Date field 'maxDate' fixed value tooltip",
@@ -754,6 +764,11 @@
     "description": "Label for 'deriveHouseNumber' builder field",
     "originalDefault": "House number component"
   },
+  "jV58dA": {
+    "defaultMessage": "This will make the text area auto expand its height as the user is typing into the area.",
+    "description": "Tooltip for 'AutoExpand' builder field",
+    "originalDefault": "This will make the text area auto expand its height as the user is typing into the area."
+  },
   "k1+ljn": {
     "defaultMessage": "Move down",
     "description": "Options table: move option down",
@@ -839,6 +854,11 @@
     "description": "Label for 'validate.min' builder field",
     "originalDefault": "Minimum value"
   },
+  "pDVNSf": {
+    "defaultMessage": "Number of rows",
+    "description": "Label for 'NumberOfRows' builder field",
+    "originalDefault": "Number of rows"
+  },
   "paY2Oa": {
     "defaultMessage": "Options from expression: <code>{expression}</code>",
     "description": "Selectboxes dummy option for itemsExpression",

i18n/messages/nl.json

@@ -398,6 +398,16 @@
     "description": "Tooltip for 'maxNumberOfFiles' builder field",
     "originalDefault": "The maximum number of files that can be uploaded."
   },
+  "KwatvH": {
+    "defaultMessage": "Het aantal regels voor dit tekstvlak.",
+    "description": "Tooltip for 'NumberOfRows' builder field",
+    "originalDefault": "The number of rows for this text area."
+  },
+  "LJckD5": {
+    "defaultMessage": "Maak automatisch groter",
+    "description": "Label for 'AutoExpand' builder field",
+    "originalDefault": "Auto Expand"
+  },
   "Nsifca": {
     "defaultMessage": "De maximale datum die gekozen kan worden.",
     "description": "Date field 'maxDate' fixed value tooltip",
@@ -762,6 +772,11 @@
     "description": "Label for 'deriveHouseNumber' builder field",
     "originalDefault": "House number component"
   },
+  "jV58dA": {
+    "defaultMessage": "Dit zorgt ervoor dat het tekstvlak automatisch groter wordt wanneer de gebruiker tekst invoert.",
+    "description": "Tooltip for 'AutoExpand' builder field",
+    "originalDefault": "This will make the text area auto expand its height as the user is typing into the area."
+  },
   "k1+ljn": {
     "defaultMessage": "Omlaag",
     "description": "Options table: move option down",
@@ -849,6 +864,11 @@
     "description": "Label for 'validate.min' builder field",
     "originalDefault": "Minimum value"
   },
+  "pDVNSf": {
+    "defaultMessage": "Aantal rijen",
+    "description": "Label for 'NumberOfRows' builder field",
+    "originalDefault": "Number of rows"
+  },
   "paY2Oa": {
     "defaultMessage": "Waarden via de expressie: <code>{expression}</code>",
     "description": "Selectboxes dummy option for itemsExpression",

src/components/ComponentConfiguration.stories.tsx

@@ -367,6 +367,81 @@ export const NumberField: Story = {
   },
 };
 
+export const Textarea: Story = {
+  render: Template,
+  name: 'type: textarea',
+
+  args: {
+    component: {
+      id: 'wekruya',
+      type: 'textarea',
+      key: 'textarea',
+      label: 'A textarea field',
+      autoExpand: false,
+      rows: 3,
+      validate: {
+        required: false,
+      },
+    },
+
+    builderInfo: {
+      title: 'Textarea',
+      group: 'basic',
+      icon: 'hashtag',
+      schema: {placeholder: ''},
+      weight: 30,
+    },
+  },
+
+  play: async ({canvasElement, args}) => {
+    const canvas = within(canvasElement);
+
+    await expect(canvas.getByLabelText('Label')).toHaveValue('A textarea field');
+    await waitFor(async () => {
+      await expect(canvas.getByLabelText('Property Name')).toHaveValue('aTextareaField');
+    });
+    await expect(canvas.getByLabelText('Description')).toHaveValue('');
+    await expect(canvas.getByLabelText('Tooltip')).toHaveValue('');
+    await expect(canvas.getByLabelText('Show in summary')).toBeChecked();
+    await expect(canvas.getByLabelText('Show in email')).not.toBeChecked();
+    await expect(canvas.getByLabelText('Show in PDF')).toBeChecked();
+
+    // ensure that changing fields in the edit form properly update the preview
+    const preview = within(canvas.getByTestId('componentPreview'));
+
+    await userEvent.clear(canvas.getByLabelText('Label'));
+    await userEvent.type(canvas.getByLabelText('Label'), 'Updated preview label');
+    expect(await preview.findByText('Updated preview label'));
+
+    const previewInput = preview.getByLabelText('Updated preview label');
+    await expect(previewInput).toHaveDisplayValue('');
+
+    // Ensure that the manually entered key is kept instead of derived from the label,
+    // even when key/label components are not mounted.
+    const keyInput = canvas.getByLabelText('Property Name');
+    // fireEvent is deliberate, as userEvent.clear + userEvent.type briefly makes the field
+    // not have any value, which triggers the generate-key-from-label behaviour.
+    fireEvent.change(keyInput, {target: {value: 'customKey'}});
+    await userEvent.click(canvas.getByRole('tab', {name: 'Basic'}));
+    await userEvent.clear(canvas.getByLabelText('Label'));
+    await userEvent.type(canvas.getByLabelText('Label'), 'Other label', {delay: 50});
+    await expect(canvas.getByLabelText('Property Name')).toHaveDisplayValue('customKey');
+    // check that toggling the 'multiple' checkbox properly updates the preview and default
+    // value field. We use fireEvent because firefox borks on userEvent.click, see:
+    // https://github.com/testing-library/user-event/issues/1149
+    fireEvent.click(canvas.getByLabelText<HTMLInputElement>('Multiple values'));
+    await userEvent.click(preview.getByRole('button', {name: 'Add another'}));
+    await expect(preview.getByTestId('input-customKey[0]')).toHaveDisplayValue('');
+    // test for the default value inputs -> these don't have accessible labels/names :(
+    const addButtons = canvas.getAllByRole('button', {name: 'Add another'});
+    await userEvent.click(addButtons[0]);
+    expect(await canvas.findByTestId('input-defaultValue[0]'));
+
+    await userEvent.click(canvas.getByRole('button', {name: 'Save'}));
+    expect(args.onSubmit).toHaveBeenCalled();
+  },
+};
+
 export const DateField: Story = {
   render: Template,
   name: 'type: date',

src/components/formio/textarea.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import {Field, useFormikContext} from 'formik';
-import {useContext, useRef} from 'react';
+import {useContext, useLayoutEffect, useRef} from 'react';
 
 import {RenderContext} from '@/context';
 import CharCount from '@/utils/charcount';
@@ -17,6 +17,7 @@ export interface TextAreaProps {
   tooltip?: string;
   description?: React.ReactNode;
   showCharCount?: boolean;
+  autoExpand?: boolean;
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
@@ -27,6 +28,7 @@ export const TextArea: React.FC<JSX.IntrinsicElements['textarea'] & TextAreaProp
   tooltip = '',
   description = '',
   showCharCount = false,
+  autoExpand = false,
   onChange,
   ...props
 }) => {
@@ -37,6 +39,13 @@ export const TextArea: React.FC<JSX.IntrinsicElements['textarea'] & TextAreaProp
   const inputRef = useRef<HTMLInputElement>(null);
   const {bareInput} = useContext(RenderContext);
 
+  useLayoutEffect(() => {
+    if (autoExpand && inputRef.current) {
+      inputRef.current.style.height = 'inherit';
+      inputRef.current.style.height = `${inputRef.current.scrollHeight}px`;
+    }
+  }, [autoExpand, inputRef, value]);
+
   const htmlId = `editform-${name}`;
   if (value === undefined && props.value === undefined) {
     props = {...props, value: ''};

src/registry/index.tsx

@@ -12,6 +12,7 @@ import NumberField from './number';
 import PhoneNumber from './phonenumber';
 import Postcode from './postcode';
 import Selectboxes from './selectboxes';
+import Textarea from './textarea';
 import TextField from './textfield';
 import TimeField from './time';
 import {Registry, RegistryEntry} from './types';
@@ -33,6 +34,7 @@ export const getRegistryEntry = <S extends AnyComponentSchema | FallbackSchema>(
 const REGISTRY: Registry = {
   textfield: TextField,
   email: Email,
+  textarea: Textarea,
   number: NumberField,
   date: DateField,
   datetime: DateTimeField,

src/registry/textarea/edit-validation.ts

@@ -0,0 +1,31 @@
+import {IntlShape} from 'react-intl';
+import {z} from 'zod';
+
+import {buildCommonSchema} from '@/registry/validation';
+
+const textareaSchema = z.string().optional();
+
+// case for when component.multiple=false
+const singleValueSchema = z
+  .object({multiple: z.literal(false)})
+  .and(z.object({defaultValue: textareaSchema}));
+
+// case for when component.multiple=true
+const multipleValueSchema = z
+  .object({multiple: z.literal(true)})
+  .and(z.object({defaultValue: textareaSchema.array()}));
+
+// Omit `autoExpand` as it will be set in the UI via a checkbox
+const textareaSpecific = z.object({
+  validate: z.object({
+    maxLength: z.number().int().gte(1).optional(),
+  }),
+  rows: z.number().int().gte(1).optional(),
+});
+
+const defaultValueSchema = singleValueSchema.or(multipleValueSchema);
+
+const schema = (intl: IntlShape) =>
+  buildCommonSchema(intl).and(textareaSpecific).and(defaultValueSchema);
+
+export default schema;