()
| 234 | }); |
| 235 | |
| 236 | function TextAreaInput() { |
| 237 | // Force re-render when value changes so we update the height. |
| 238 | let {placeholder} = useSlottedContext(AriaTextAreaContext) ?? {}; |
| 239 | let onHeightChange = (input: HTMLTextAreaElement) => { |
| 240 | // TODO: only do this if an explicit height is not given? |
| 241 | if (input) { |
| 242 | let prevAlignment = input.style.alignSelf; |
| 243 | let prevOverflow = input.style.overflow; |
| 244 | // Firefox scroll position is lost when overflow: 'hidden' is applied so we skip applying it. |
| 245 | // The measure/applied height is also incorrect/reset if we turn on and off |
| 246 | // overflow: hidden in Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1787062 |
| 247 | let isFirefox = 'MozAppearance' in input.style; |
| 248 | if (!isFirefox) { |
| 249 | input.style.overflow = 'hidden'; |
| 250 | } |
| 251 | input.style.alignSelf = 'start'; |
| 252 | input.style.height = 'auto'; |
| 253 | // offsetHeight - clientHeight accounts for the border/padding. |
| 254 | input.style.height = `${input.scrollHeight + (input.offsetHeight - input.clientHeight)}px`; |
| 255 | input.style.overflow = prevOverflow; |
| 256 | input.style.alignSelf = prevAlignment; |
| 257 | } |
| 258 | }; |
| 259 | let {ref} = useSlottedContext(InputContext) ?? {}; |
| 260 | |
| 261 | return ( |
| 262 | <AriaTextArea |
| 263 | ref={mergeRefs(onHeightChange, ref as RefObject<HTMLTextAreaElement | null>)} |
| 264 | // Workaround for baseline alignment bug in Safari. |
| 265 | // https://bugs.webkit.org/show_bug.cgi?id=142968 |
| 266 | placeholder={placeholder ?? ' '} |
| 267 | className={style({ |
| 268 | paddingX: 0, |
| 269 | paddingY: centerPadding(), |
| 270 | minHeight: controlSize(), |
| 271 | boxSizing: 'border-box', |
| 272 | backgroundColor: 'transparent', |
| 273 | color: { |
| 274 | default: 'inherit', |
| 275 | '::placeholder': { |
| 276 | default: 'gray-600', |
| 277 | forcedColors: 'GrayText' |
| 278 | } |
| 279 | }, |
| 280 | fontFamily: 'inherit', |
| 281 | fontSize: 'inherit', |
| 282 | fontWeight: 'inherit', |
| 283 | lineHeight: 'inherit', |
| 284 | // Don't baseline align with the FieldGroup - Chrome's baseline for an empty textarea |
| 285 | // is unstable (https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/textarea#baseline_inconsistency). |
| 286 | // paddingY centers the first line within --field-height, matching the padded |
| 287 | // ::before baseline anchor on the FieldGroup. |
| 288 | alignSelf: { |
| 289 | isChrome: 'start' |
| 290 | }, |
| 291 | flexGrow: 1, |
| 292 | minWidth: 0, |
| 293 | outlineStyle: 'none', |
nothing calls this directly
no test coverage detected