fix: hydration mismatch in Tooltip and Popover (#190)

This commit is contained in:
Wesley Luyten
2025-11-12 13:30:10 -06:00
committed by GitHub
parent e239221d32
commit 8b868e95a3
2 changed files with 6 additions and 2 deletions
+3 -1
View File
@@ -9,6 +9,7 @@ import {
useCallback,
useContext,
useEffect,
useId,
useMemo,
useRef,
useState,
@@ -266,7 +267,8 @@ function PopoverPopup({ id, className, children }: PopoverPopupProps): JSX.Eleme
const { popupRef, triggerRef, transitionStatus, placement } = usePopoverContext();
const triggerElement = triggerRef.current;
const popupId = useMemo(() => id ?? `popover-${Math.random().toString(36).substring(2, 9)}`, [id]);
const uniqueId = useId();
const popupId = id ?? uniqueId;
useEffect(() => {
if (!popupRef.current || !triggerRef.current) return;
+3 -1
View File
@@ -9,6 +9,7 @@ import {
useCallback,
useContext,
useEffect,
useId,
useMemo,
useRef,
useState,
@@ -307,7 +308,8 @@ function TooltipPopup({ id, className = '', children }: TooltipPopupProps): JSX.
const { popupRef, triggerRef, transitionStatus, placement } = useTooltipContext();
const triggerElement = triggerRef.current;
const popupId = useMemo(() => id ?? `tooltip-${Math.random().toString(36).substring(2, 9)}`, [id]);
const uniqueId = useId();
const popupId = id ?? uniqueId;
useEffect(() => {
if (!popupRef.current || !triggerRef.current) return;