Textarea should not behave differently inside a flex (#1531)

* Quiet TextArea shouldn't behave different in a Flex

* improve story

* fix lint

Author: snowystinger

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

@@ -37,8 +37,11 @@ function TextArea(props: SpectrumTextFieldProps, ref: RefObject<TextFieldRef>) {
   let onHeightChange = useCallback(() => {
     if (isQuiet) {
       let input = inputRef.current;
+      let prevAlignment = input.style.alignSelf;
+      input.style.alignSelf = 'start';
       input.style.height = 'auto';
       input.style.height = `${input.scrollHeight}px`;
+      input.style.alignSelf = prevAlignment;
     }
   }, [isQuiet, inputRef]);
 

packages/@react-spectrum/textfield/stories/TextArea.stories.js

@@ -12,6 +12,7 @@
 
 import {action} from '@storybook/addon-actions';
 import {Button} from '@react-spectrum/button';
+import {Flex} from '@react-spectrum/layout';
 import {Form} from '@react-spectrum/form';
 import Info from '@spectrum-icons/workflow/Info';
 import React, {useState} from 'react';
@@ -135,7 +136,8 @@ storiesOf('TextArea', module)
   )
   .add('controlled interactive',
     () => <ControlledTextArea />
-  );
+  )
+  .add('in flex', () => renderInFlexRowAndBlock());
 
 function render(props = {}) {
   return (
@@ -159,3 +161,61 @@ function ControlledTextArea(props) {
     </>
   );
 }
+
+function renderInFlexRowAndBlock(props = {}) {
+  return (
+    <Flex direction="column" gap="size-300">
+      Align stretch
+      <Flex gap="size-100">
+        <TextArea
+          label="Default"
+          placeholder="React"
+          {...props} />
+        <TextArea
+          label="Quiet"
+          placeholder="React"
+          isQuiet
+          {...props} />
+        <TextArea
+          label="Quiet"
+          placeholder="React"
+          isQuiet
+          {...props} />
+      </Flex>
+      Align end
+      <Flex gap="size-100" alignItems="end">
+        <TextArea
+          label="Default"
+          placeholder="React"
+          {...props} />
+        <TextArea
+          label="Quiet"
+          placeholder="React"
+          isQuiet
+          {...props} />
+        <TextArea
+          label="Quiet"
+          placeholder="React"
+          isQuiet
+          {...props} />
+      </Flex>
+      Display block
+      <div>
+        <TextArea
+          label="Default"
+          placeholder="React"
+          {...props} />
+        <TextArea
+          label="Quiet"
+          placeholder="React"
+          isQuiet
+          {...props} />
+        <TextArea
+          label="Quiet"
+          placeholder="React"
+          isQuiet
+          {...props} />
+      </div>
+    </Flex>
+  );
+}