Repository: appsmithorg/appsmith
File: app/client/packages/design-system/widgets/src/components/TextArea/src/TextArea.tsx (TypeScript)

Code before:
    // Quiet textareas always grow based on their text content.
    // Standard textareas also grow by default, unless an explicit height is set.
    if (props.height == null && inputRef.current) {
      const input = inputRef.current;
      const prevAlignment = input.style.alignSelf;
      const prevOverflow = input.style.overflow;
      // Firefox scroll position is lost when overflow: 'hidden' is applied so we skip applying it.
      // The measure/applied height is also incorrect/reset if we turn on and off
      // overflow: hidden in Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1787062
      const isFirefox = "MozAppearance" in input.style;

      if (!isFirefox) {
        input.style.overflow = "hidden";
      }

      input.style.alignSelf = "start";
      input.style.height = "auto";

      const computedStyle = getComputedStyle(input);
      const height = parseFloat(computedStyle.height) || 0;
      const marginTop = parseFloat(computedStyle.marginTop);
      const marginBottom = parseFloat(computedStyle.marginBottom);

      setTextFieldHeight(height + marginTop + marginBottom);

      input.style.height = `${input.scrollHeight}px`;
      input.style.overflow = prevOverflow;
      input.style.alignSelf = prevAlignment;
    }
  }, [props.height]);

  useLayoutEffect(() => {
    if (inputRef.current) {
      onHeightChange();
    }
  }, [onHeightChange, inputValue]);

  const [{ width }, setSize] = useState<Size>({
    width: undefined,
  });

  const onResize = useDebounceCallback(setSize, 200);

  useResizeObserver({
    ref: inputRef,
    onResize,
  });

  useEffect(
    function updateHeight() {
      onHeightChange();

Review comment (bug):
had to add 1px here, there was a weird scrollbar bug happening without it.

https://github.com/user-attachments/assets/e83d1e18-f704-4ac1-8d55-d94149043c4f



Code after:
    // Quiet textareas always grow based on their text content.
    // Standard textareas also grow by default, unless an explicit height is set.
    if (props.height == null && inputRef.current) {
      const input = inputRef.current;
      const prevAlignment = input.style.alignSelf;
      const prevOverflow = input.style.overflow;
      // Firefox scroll position is lost when overflow: 'hidden' is applied so we skip applying it.
      // The measure/applied height is also incorrect/reset if we turn on and off
      // overflow: hidden in Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1787062
      const isFirefox = "MozAppearance" in input.style;

      if (!isFirefox) {
        input.style.overflow = "hidden";
      }

      input.style.alignSelf = "start";
      input.style.height = "auto";

      const computedStyle = getComputedStyle(input);
      const height = parseFloat(computedStyle.height) || 0;
      const marginTop = parseFloat(computedStyle.marginTop);
      const marginBottom = parseFloat(computedStyle.marginBottom);

      setTextFieldHeight(height + marginTop + marginBottom);

      input.style.height = `${input.scrollHeight + 1}px`;
      input.style.overflow = prevOverflow;
      input.style.alignSelf = prevAlignment;

      if (input.scrollHeight > input.clientHeight) {
        input.setAttribute("data-has-scrollbar", "true");
      } else {
        input.removeAttribute("data-has-scrollbar");
      }
    }
  }, [props.height]);

  useLayoutEffect(() => {
    if (inputRef.current) {
      onHeightChange();
    }
  }, [onHeightChange, inputValue]);

  const [{ width }, setSize] = useState<Size>({
    width: undefined,
  });

  const onResize = useDebounceCallback(setSize, 200);

  useResizeObserver({
    ref: inputRef,