| 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 ( |