[BUG] - Components/Textarea

[reversoid]

Describe the bug

Textarea autosize works bad if we pass onChange callback that changes state

Your Example Website or App

https://codesandbox.io/p/sandbox/dreamy-faraday-b9gkdi?file=%2Fsrc%2FApp.tsx&selection=%5B%7B%22endColumn%22%3A14%2C%22endLineNumber%22%3A11%2C%22startColumn%22%3A14%2C%22startLineNumber%22%3A11%7D%5D

Steps to Reproduce the Bug or Issue

1. Go to provided codesanbox examle
2. Write some text in two fields, use linebreaks to enlarge textareas

Expected behavior

As a user, I expect textearea with onChange(() => setState) callback enlarge the same way as textearea without it does.

Screenshots or Videos

Operating System Version

Windows 10

Browser

Chrome

[nooikko]

Hi! New around these parts but decided to look into this. Looks like the main issue is how the textbox handles resizing.

Issue:
When you pass in the value prop, the Textarea component marks itself as controlled using a variable called isControlled. Once that is set, the following code responsible for handling the onChange resizing is disabled:

// ./packages/react/src/textarea.tsx
// Line 99

    const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
      if (!isControlled) {
        resizeTextarea();
      }
      onChange && onChange(event);
    };

This is then followed up by failure to check the prop.value in the resizeTextarea function:

// ./packages/react/src/textarea.tsx
// Line 72
    const resizeTextarea = () => {
      const node = textareaRef.current!;
      const nodeSizingData =
        cacheMeasurements && measurementsCacheRef.current
          ? measurementsCacheRef.current
          : getSizingData(node);

      if (!nodeSizingData) {
        return;
      }

      measurementsCacheRef.current = nodeSizingData;

      const [height, rowHeight] = calculateNodeHeight(
        nodeSizingData,
        // This is the problem line
        node.value || node.placeholder || "x",
        rows || minRows,
        rows || maxRows,
      );

      if (heightRef.current !== height) {
        heightRef.current = height;
        node.style.setProperty("height", `${height}px`, "important");
        onHeightChange && onHeightChange(height, {rowHeight});
      }
    };

I'm pretty new to open-source stuff but I'll see if I'm able to push up a PR shortly that would resolve this. In the meantime, there's no great way to handle this since the resizeTextarea function isn't exported.