Fix Firefox textarea autoscroll (#3432)

* make Textarea always scroll to bottom on height change

this fixes issue where Firefox wouldnt auto scroll as the user typed in a quiet custom height textarea. The overflow style shifts cause the scroll position to remain static once we hit the user specified height

* replace scrollTop solution with selectionRange instead

scrollTop solution doesnt work if the user is in the middle of the textarea and starts deleting stuff since it will cause the scroll to jump to the bottom, this feels a bit gross because of the raf

* adjusting approach back to scrollTop to avoid raf

* simplifying logic

* fixing FF autoscroll issue with scrollbar-width instead

* fix tests

* fix ssr tests

* Apply review suggestion

Co-authored-by: Devon Govett <[email protected]>

* hack to fix Firefox autoscroll issue

FF 104 introduces a bug where setting the input height directly doesnt actually change the height if overflow/scrollbar-width is reset. We decided to remove the overflow setting if we are in FF, note that this will bring the following bug back: #3379 (review)

* adding filed brower bug

Co-authored-by: Devon Govett <[email protected]>
Co-authored-by: Danni <[email protected]>

Author: 3 people

packages/@react-spectrum/textfield/src/TextArea.tsx

@@ -31,7 +31,6 @@ function TextArea(props: SpectrumTextFieldProps, ref: RefObject<TextFieldRef>) {
 
   // not in stately because this is so we know when to re-measure, which is a spectrum design
   let [inputValue, setInputValue] = useControlledState(props.value, props.defaultValue, () => {});
-
   let inputRef = useRef<HTMLTextAreaElement>();
 
   let onHeightChange = useCallback(() => {
@@ -41,15 +40,21 @@ function TextArea(props: SpectrumTextFieldProps, ref: RefObject<TextFieldRef>) {
       let input = inputRef.current;
       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.overflow = 'hidden';
       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;
     }
-  }, [isQuiet, inputRef]);
+  }, [isQuiet, inputRef, props.height]);
 
   useLayoutEffect(() => {
     if (inputRef.current) {