Workaround for TextArea autoResize issue

src/inputs/WizTextArea.tsx

@@ -1,12 +1,13 @@
 import { InputGroup, TextArea as PFTextArea, TextAreaProps, TextInput } from '@patternfly/react-core'
-import { Fragment, useCallback, useState } from 'react'
+import { Fragment, useCallback, useRef, useState } from 'react'
 import { WizTextDetail } from '..'
 import { ClearInputButton } from '../components/ClearInputButton'
 import { PasteInputButton } from '../components/PasteInputButton'
 import { ShowSecretsButton } from '../components/ShowSecretsButton'
 import { DisplayMode } from '../contexts/DisplayModeContext'
 import { getEnterPlaceholder, InputCommonProps, useInput } from './Input'
 import { WizFormGroup } from './WizFormGroup'
+import useResizeObserver from '@react-hook/resize-observer'
 
 export type WizTextAreaProps = InputCommonProps<string> & {
     label: string
@@ -21,6 +22,31 @@ export function WizTextArea(props: WizTextAreaProps) {
     // Hide initially if a value is set
     const [showSecrets, setShowSecrets] = useState(!value)
 
+    // Workaround for problem with PatternFly TextArea autoResize feature
+    // scrollHeight is still 0 when this code runs in PatternFly
+    const textAreaRef = useRef<HTMLTextAreaElement>(null)
+    const [initialHeightSet, setInitialHeightSet] = useState(false)
+    const setInitialHeight = useCallback(() => {
+        const field = textAreaRef.current
+        if (!initialHeightSet && field) {
+            const parent = field.parentElement
+            if (parent) {
+                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'))
+                parent.style.setProperty('height', `${height}px`)
+                setInitialHeightSet(true)
+            }
+        }
+    }, [initialHeightSet])
+    useResizeObserver(textAreaRef, setInitialHeight)
+
     const onChange = useCallback<NonNullable<TextAreaProps['onChange']>>((_event, value) => setValue(value), [setValue])
 
     if (hidden) return <Fragment />
@@ -48,8 +74,9 @@ export function WizTextArea(props: WizTextAreaProps) {
                         type={!props.secret || showSecrets ? 'text' : 'password'}
                         spellCheck="false"
                         resizeOrientation="vertical"
-                        autoResize={!!value} // Only enable after text has been entered; bug with initial size calculation
+                        autoResize
                         readOnlyVariant={props.readonly ? 'default' : undefined}
+                        ref={textAreaRef}
                     />
                 )}
                 {!disabled && value !== '' && props.secret && (