TextArea's input is smaller than the component's height property

[dmskinner]

🐛 Bug Report

The TextArea component no longer uses the height property correctly. The input is smaller than component's size.

🤔 Expected Behavior

TextArea should have its input display in the proper height.

😯 Current Behavior

In React Spectrum v3.13.0 using height="size-3000" provided an input that is larger and matched the component's size. The new version (> 3.14.0) has the correct component size, but the input is smaller.

💁 Possible Solution

🔦 Context

We are using the component in a Dialog, With the component and input sizes being mismatched it creates too much whitespace within the Dialog.

💻 Code Sample

I copied the TextArea component directly from our codebase into a codesandbox.io sandbox and you can observe the undesired behavior when switching between React Spectrum v3.13.0 and v3.14.0/1

🌍 Your Environment

Software	Version(s)
react-spectrum	3.14.1
Browser	Chrome 94.0.4606.81
Operating System	Windows 10 Pro

🧢 Your Company/Team

Adobe/Cloud Enablement Services - Management Tooling

🕷 Tracking Issue (optional)

[snowystinger]

Looks like essentially, flex: 1 1 auto got removed from spectrum-Field-field--multiline
It's still here and on that classname, https://github.com/adobe/react-spectrum/blame/a25cdbabe81735021d4a790ca540dfc3d01defe1/packages/%40adobe/spectrum-css-temp/components/fieldlabel/index.css#L79

So we must not be applying CSS modules to it, which is what I see here

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

Line 147 in a25cdba

className: multiLine ? 'spectrum-Field-field--multiline' : ''

it just needs to be changed to
className: multiLine ? classNames(fieldStyles, 'spectrum-Field-field--multiline') : ''

where fieldStyles is imported by import fieldStyles from '@adobe/spectrum-css-temp/components/fieldlabel/index.css';

[dmskinner]

@snowystinger I made the change you suggested. However, it isn't as simple as I'd hoped.

What I did learn is the order the css classes are being applied has changed. Through the process I discovered the class names show _spectrum-Field-field_* last in v3.14. When I view the class names from the codesandbox component from v3.13, it is second to last:

I started looking into how to fix that issue, but I'm out of my depth. It looks like it might be a problem in the Field component, especially since the spectrum-Field-field class is added to the children at the end. It looks like how the children are rendered and their classNames applied changed with last release... but I'm not sure if that's right, or how to fix it, or if I'll break all the other things if I do come up with a solution to fix this problem.

[snowystinger]

o, I see, this is going to be helptext related then, @majornista i think that would be from your change to always render the helptext wrapper for focus #2422 ?

[poeschko]

Just ran into this as well. You can also see the issue in the storybook for a recent commit: https://reactspectrum.blob.core.windows.net/reactspectrum/a6deca5d364756b7847a8563d5536709cc3a808b/storybook/index.html?path=/story/textarea--custom-height-with-label

Related: #1453, #1518