feat(useTextareaAutosize): add tryRequestAnimationFrame for fallback

Co-authored-by: Robin <37191683+OrbisK@users.noreply.github.com>
vueuse · antfu · Feb 15, 2025 · Feb 2, 2025 · Feb 3, 2025 · Feb 14, 2025
commit 45a0e6db5e7ce625361a4b3d8e984d2003bfbf70
diff --git a/packages/core/useTextareaAutosize/index.ts b/packages/core/useTextareaAutosize/index.ts
@@ -1,8 +1,8 @@
-import type { MaybeRef } from '@vueuse/shared'
+import type { Fn, MaybeRef } from '@vueuse/shared'
 import type { WatchSource } from 'vue'
 import { toRef } from '@vueuse/shared'
 import { nextTick, ref, toValue, watch } from 'vue'
 import { type ConfigurableWindow, defaultWindow } from '../_configurable'
 import { useResizeObserver } from '../useResizeObserver'

 export interface UseTextareaAutosizeOptions extends ConfigurableWindow {
@@ -20,6 +20,24 @@
  styleProp?: 'height' | 'minHeight'
 }

+/**
+ * Call window.requestAnimationFrame(), if not available, just call the function
+ *
+ * @param window
+ * @param fn
+ */
+function tryRequestAnimationFrame(
+  window: Window | undefined = defaultWindow,
+  fn: Fn,
+) {
+  if (window && typeof window.requestAnimationFrame === 'function') {
+    window.requestAnimationFrame(fn)
+  }
+  else {
+    fn()
+  }
+}
+
 export function useTextareaAutosize(options: UseTextareaAutosizeOptions = {}) {
  const { window = defaultWindow } = options
  const textarea = toRef(options?.element)
@@ -55,7 +73,7 @@
    if (textareaOldWidth.value === contentRect.width)
      return

-    window?.requestAnimationFrame(() => {
+    tryRequestAnimationFrame(window, () => {
      textareaOldWidth.value = contentRect.width
      triggerResize()
    })