fix(textarea): fix height logic for autoresize textarea

[evwilkin]

What: Closes #11921

Additional issues: https://issues.redhat.com/browse/AAP-47692

For consideration - 2 options for pulling this fix into Core as described by @mcoker but would change the markup so be potentially breaking:

Option 1:

diff --git a/packages/react-core/src/components/TextArea/TextArea.tsx b/packages/react-core/src/components/TextArea/TextArea.tsx
index 267e67728a..b794fed2d7 100644
--- a/packages/react-core/src/components/TextArea/TextArea.tsx
+++ b/packages/react-core/src/components/TextArea/TextArea.tsx
@@ -60,16 +60,12 @@ class TextAreaBase extends Component<TextAreaProps> {
 
   private setAutoHeight = (field: HTMLTextAreaElement) => {
     const parent = field.parentElement;
     parent.style.setProperty('height', 'inherit');
     const computed = window.getComputedStyle(field);
     // Calculate the height
-    const height =
-      parseInt(computed.getPropertyValue('border-top-width')) +
-      parseInt(computed.getPropertyValue('padding-top')) +
-      field.scrollHeight +
-      parseInt(computed.getPropertyValue('padding-bottom')) +
-      parseInt(computed.getPropertyValue('border-bottom-width'));
+    const height = field.scrollHeight;
     parent.style.setProperty('height', `${height}px`);
+    parent.style.setProperty('box-sizing', 'content-box');
   };

• Pros - removes all the extra calc stuff and lets CSS handle it
• Cons - Adds an extra box-sizing: content-box style to the existing style="height: {n}px" attribute in the rendered page markup (breaking?)

Option 2: - same as option 1, but instead of adding box-sizing: content-box as an inline style, we add a class in core/react (.pf-m-auto-resize) that sets that style for us

• Pros - styles can be easier controlled on the core side, no style stuff needed for autoresize other than react applying the height of the box
• Cons - same question about whether it's breaking since we'd add .pf-m-auto-resize probably on the other form control wrapper

[patternfly-build]

Preview: https://patternfly-react-pr-11922.surge.sh

A11y report: https://patternfly-react-pr-11922-a11y.surge.sh

[mcoker]

🚀

[kmcfaul]

Will take a second look to double check on the snapshot update

[kmcfaul]

I think the snapshot is probably fine, it must have snapshotted during the intermediate step in the calc where it sets 'height: inherit' opposed to post-calc. It's possible that it's a testing env quirk where maybe the window computed styles returns something invalid.

The fix looks to be working on the preview.