|
1 | | -import React, { useEffect, useState, useRef } from 'react' |
| 1 | +import React, { useEffect, useState, useRef, useCallback } from 'react' |
| 2 | +import { autoUpdate } from '@floating-ui/dom' |
2 | 3 | import classNames from 'classnames' |
3 | 4 | import debounce from 'utils/debounce' |
4 | 5 | import { useTooltip } from 'components/TooltipProvider' |
5 | 6 | import useIsomorphicLayoutEffect from 'utils/use-isomorphic-layout-effect' |
6 | | -import { autoUpdate } from '@floating-ui/dom' |
7 | 7 | import { getScrollParent } from 'utils/get-scroll-parent' |
8 | 8 | import { computeTooltipPosition } from 'utils/compute-positions' |
9 | 9 | import coreStyles from './core-styles.module.css' |
@@ -291,7 +291,7 @@ const Tooltip = ({ |
291 | 291 | // mouse enter and focus events being triggered toggether |
292 | 292 | const debouncedHandleShowTooltip = debounce(handleShowTooltip, 50, true) |
293 | 293 | const debouncedHandleHideTooltip = debounce(handleHideTooltip, 50, true) |
294 | | - const updateTooltipPosition = () => { |
| 294 | + const updateTooltipPosition = useCallback(() => { |
295 | 295 | if (position) { |
296 | 296 | // if `position` is set, override regular and `float` positioning |
297 | 297 | handleTooltipPosition(position) |
@@ -335,7 +335,17 @@ const Tooltip = ({ |
335 | 335 | } |
336 | 336 | setActualPlacement(computedStylesData.place as PlacesType) |
337 | 337 | }) |
338 | | - } |
| 338 | + }, [ |
| 339 | + show, |
| 340 | + activeAnchor, |
| 341 | + content, |
| 342 | + externalStyles, |
| 343 | + place, |
| 344 | + offset, |
| 345 | + positionStrategy, |
| 346 | + position, |
| 347 | + float, |
| 348 | + ]) |
339 | 349 |
|
340 | 350 | useEffect(() => { |
341 | 351 | const elementRefs = new Set(anchorRefs) |
@@ -458,7 +468,15 @@ const Tooltip = ({ |
458 | 468 | * rendered is also a dependency to ensure anchor observers are re-registered |
459 | 469 | * since `tooltipRef` becomes stale after removing/adding the tooltip to the DOM |
460 | 470 | */ |
461 | | - }, [rendered, anchorRefs, anchorsBySelect, closeOnEsc, events]) |
| 471 | + }, [ |
| 472 | + activeAnchor, |
| 473 | + updateTooltipPosition, |
| 474 | + rendered, |
| 475 | + anchorRefs, |
| 476 | + anchorsBySelect, |
| 477 | + closeOnEsc, |
| 478 | + events, |
| 479 | + ]) |
462 | 480 |
|
463 | 481 | useEffect(() => { |
464 | 482 | let selector = anchorSelect ?? '' |
@@ -538,7 +556,7 @@ const Tooltip = ({ |
538 | 556 |
|
539 | 557 | useEffect(() => { |
540 | 558 | updateTooltipPosition() |
541 | | - }, [show, activeAnchor, content, externalStyles, place, offset, positionStrategy, position]) |
| 559 | + }, [updateTooltipPosition]) |
542 | 560 |
|
543 | 561 | useEffect(() => { |
544 | 562 | if (!contentWrapperRef?.current) { |
|
0 commit comments