Fix useDynamicTextareaHeight not taking into account padding (#2848)

* Fix `useDynamicTextareaHeight` not taking into account padding

* Create .changeset/ten-peaches-breathe.md

Author: iansan5653

.changeset/ten-peaches-breathe.md

@@ -0,0 +1,7 @@
+---
+"@primer/react": patch
+---
+
+Fix `useDynamicTextareaHeight` not taking into account top padding of `textarea`
+
+Also makes the hook accept a `RefObject` instead of an element instance

src/drafts/MarkdownEditor/_MarkdownInput.tsx

@@ -92,7 +92,7 @@ export const MarkdownInput = forwardRef<HTMLTextAreaElement, MarkdownInputProps>
       return subscription?.unsubscribe
     }, [pasteUrlsAsPlainText])
 
-    const dynamicHeightStyles = useDynamicTextareaHeight({maxHeightLines, minHeightLines, element: ref.current, value})
+    const dynamicHeightStyles = useDynamicTextareaHeight({maxHeightLines, minHeightLines, elementRef: ref, value})
     const heightStyles = fullHeight ? {} : dynamicHeightStyles
 
     return (

src/drafts/hooks/useDynamicTextareaHeight.ts

@@ -1,12 +1,12 @@
-import {useLayoutEffect, useState} from 'react'
+import {RefObject, useLayoutEffect, useState} from 'react'
 
 import {SxProp} from '../../sx'
 import {getCharacterCoordinates} from '../utils/character-coordinates'
 
 type UseDynamicTextareaHeightSettings = {
-  minHeightLines: number
-  maxHeightLines: number
-  element: HTMLTextAreaElement | null
+  minHeightLines?: number
+  maxHeightLines?: number
+  elementRef: RefObject<HTMLTextAreaElement | null>
   /** The current value of the input. */
   value: string
 }
@@ -16,43 +16,47 @@ type UseDynamicTextareaHeightSettings = {
  * resizing it as the user types. If the user manually resizes the textarea, their setting
  * will be respected.
  *
- * Returns an object to spread to the component's `sx` prop.
+ * Returns an object to spread to the component's `sx` prop. If you are using `Textarea`,
+ * apply this to the child `textarea` element: `<Textarea sx={{'& textarea': resultOfThisHook}} />`.
  *
  * NOTE: for the most accurate results, be sure that the `lineHeight` of the element is
  * explicitly set in CSS.
  */
 export const useDynamicTextareaHeight = ({
   minHeightLines,
   maxHeightLines,
-  element,
+  elementRef,
   value,
 }: UseDynamicTextareaHeightSettings): SxProp['sx'] => {
   const [height, setHeight] = useState<string | undefined>(undefined)
   const [minHeight, setMinHeight] = useState<string | undefined>(undefined)
   const [maxHeight, setMaxHeight] = useState<string | undefined>(undefined)
 
   useLayoutEffect(() => {
+    const element = elementRef.current
     if (!element) return
 
     const computedStyles = getComputedStyle(element)
     const pt = computedStyles.paddingTop
-    const lastCharacterCoords = getCharacterCoordinates(element, element.value.length)
 
     // The calculator gives us the distance from the top border to the bottom of the caret, including
     // any top padding, so we need to delete the top padding to accurately get the height
     // We could also parse and subtract the top padding, but this is more reliable (no chance of NaN)
     element.style.paddingTop = '0'
+
+    const lastCharacterCoords = getCharacterCoordinates(element, element.value.length)
+
     // Somehow we come up 1 pixel too short and the scrollbar appears, so just add one
     setHeight(`${lastCharacterCoords.top + lastCharacterCoords.height + 1}px`)
     element.style.paddingTop = pt
 
     const lineHeight =
       computedStyles.lineHeight === 'normal' ? `1.2 * ${computedStyles.fontSize}` : computedStyles.lineHeight
     // Using CSS calculations is fast and prevents us from having to parse anything
-    setMinHeight(`calc(${minHeightLines} * ${lineHeight})`)
-    setMaxHeight(`calc(${maxHeightLines} * ${lineHeight})`)
+    if (minHeightLines !== undefined) setMinHeight(`calc(${minHeightLines} * ${lineHeight})`)
+    if (maxHeightLines !== undefined) setMaxHeight(`calc(${maxHeightLines} * ${lineHeight})`)
     // `value` is an unnecessary dependency but it enables us to recalculate as the user types
-  }, [minHeightLines, maxHeightLines, element, value])
+  }, [minHeightLines, maxHeightLines, value, elementRef])
 
   return {height, minHeight, maxHeight, boxSizing: 'content-box'}
 }