Here's the issue - https://codesandbox.io/p/sandbox/vigilant-aryabhata-42n8xv?file=%2Findex.tsx
Looks like it's due to this line in setAutoHeight that resets the form control wrapper height to inherit when the function runs.
|
parent.style.setProperty('height', 'inherit'); |
If the form control wrapper's parent has an explicit height set, inherit will use whatever that parent's height is. You can also see the bug if you look at the full-page example for the autoresize textarea. The form control's parent has height: 100% (occupying the full viewport height), so the textarea is full height, too.
FWIW, looks like setting height to auto instead of inherit may work better, though I only tested that in chrome, so we would want to test that in other browsers. We may look up the original implementation that added height inherit and see if there is a reason it was set to inherit, too - there may be a use case I'm not aware of.
Here's the issue - https://codesandbox.io/p/sandbox/vigilant-aryabhata-42n8xv?file=%2Findex.tsx
Looks like it's due to this line in
setAutoHeightthat resets the form control wrapper height toinheritwhen the function runs.patternfly-react/packages/react-core/src/components/TextArea/TextArea.tsx
Line 63 in 031fba5
If the form control wrapper's parent has an explicit height set,
inheritwill use whatever that parent's height is. You can also see the bug if you look at the full-page example for the autoresize textarea. The form control's parent hasheight: 100%(occupying the full viewport height), so the textarea is full height, too.FWIW, looks like setting height to
autoinstead ofinheritmay work better, though I only tested that in chrome, so we would want to test that in other browsers. We may look up the original implementation that added heightinheritand see if there is a reason it was set toinherit, too - there may be a use case I'm not aware of.