diff --git a/src/inputs/WizTextArea.tsx b/src/inputs/WizTextArea.tsx index a880633..053f91c 100644 --- a/src/inputs/WizTextArea.tsx +++ b/src/inputs/WizTextArea.tsx @@ -1,5 +1,5 @@ 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' @@ -7,6 +7,7 @@ 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 & { 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(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>((_event, value) => setValue(value), [setValue]) if (hidden) return @@ -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 && (