Fix maximum call stack size exceeded error on Tab component when using as={Fragment} (#1826)

2022-09-06 12:35:24 +02:00
parent df5b6a288c
commit 0954ec5243
2 changed files with 3 additions and 2 deletions
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix `ref` stealing from children ([#1820](https://github.com/tailwindlabs/headlessui/pull/1820))
 - Expose the `value` from the `Combobox` and `Listbox` components render prop ([#1822](https://github.com/tailwindlabs/headlessui/pull/1822))
 - Improve `scroll lock` on iOS ([#1824](https://github.com/tailwindlabs/headlessui/pull/1824))
+- Fix maximum call stack size exceeded error on `Tab` component when using `as={Fragment}` ([#1826](https://github.com/tailwindlabs/headlessui/pull/1826))

 ## [1.6.6] - 2022-07-07

@@ -333,7 +333,7 @@ let TabRoot = forwardRefWithAs(function Tab<TTag extends ElementType = typeof DE
  let internalTabRef = useRef<HTMLElement | null>(null)
  let tabRef = useSyncRefs(internalTabRef, ref, (element) => {
    if (!element) return
-    actions.forceRerender()
+    requestAnimationFrame(() => actions.forceRerender())
  })

  useIsoMorphicEffect(() => actions.registerTab(internalTabRef), [actions, internalTabRef])
@@ -490,7 +490,7 @@ let Panel = forwardRefWithAs(function Panel<TTag extends ElementType = typeof DE
  let internalPanelRef = useRef<HTMLElement>(null)
  let panelRef = useSyncRefs(internalPanelRef, ref, (element) => {
    if (!element) return
-    actions.forceRerender()
+    requestAnimationFrame(() => actions.forceRerender())
  })

  useIsoMorphicEffect(() => actions.registerPanel(internalPanelRef), [actions, internalPanelRef])