Function TextAreaInput

packages/@react-spectrum/s2/src/TextField.tsx:224–281

()

});

function TextAreaInput() {
  // Force re-render when value changes so we update the height.
  let {placeholder} = useSlottedContext(AriaTextAreaContext) ?? {};
  let onHeightChange = (input: HTMLTextAreaElement) => {
    // TODO: only do this if an explicit height is not given?
    if (input) {
      let prevAlignment = input.style.alignSelf;
      let 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
      let isFirefox = 'MozAppearance' in input.style;
      if (!isFirefox) {
        input.style.overflow = 'hidden';
      }
      input.style.alignSelf = 'start';
      input.style.height = 'auto';
      // offsetHeight - clientHeight accounts for the border/padding.
      input.style.height = `${input.scrollHeight + (input.offsetHeight - input.clientHeight)}px`;
      input.style.overflow = prevOverflow;
      input.style.alignSelf = prevAlignment;
    }
  };
  let {ref} = useSlottedContext(InputContext) ?? {};

  return (
    <AriaTextArea
      ref={mergeRefs(onHeightChange, ref as RefObject<HTMLTextAreaElement | null>)}
      // Workaround for baseline alignment bug in Safari.
      // https://bugs.webkit.org/show_bug.cgi?id=142968
      placeholder={placeholder ?? ' '}
      className={style({
        paddingX: 0,
        paddingY: centerPadding(),
        minHeight: controlSize(),
        boxSizing: 'border-box',
        backgroundColor: 'transparent',
        color: {
          default: 'inherit',
          '::placeholder': {
            default: 'gray-600',
            forcedColors: 'GrayText'
          }
        },
        fontFamily: 'inherit',
        fontSize: 'inherit',
        fontWeight: 'inherit',
        lineHeight: 'inherit',
        flexGrow: 1,
        minWidth: 0,
        outlineStyle: 'none',
        borderStyle: 'none',
        resize: 'none',
        overflowX: 'hidden'
      })}
    />
  );
}