fix race condition and tooltip data sync

Author: gabrieljablonski

src/components/Tooltip/Tooltip.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames'
 import debounce from 'utils/debounce'
 import { TooltipContent } from 'components/TooltipContent'
 import { useTooltip } from 'components/TooltipProvider'
-import { computeToolTipPosition } from '../../utils/compute-positions'
+import { computeTooltipPosition } from '../../utils/compute-positions'
 import styles from './styles.module.css'
 import type { ITooltip } from './TooltipTypes'
 
@@ -155,16 +155,24 @@ const Tooltip = ({
   }, [anchorRefs, anchorId, events, delayHide, delayShow])
 
   useEffect(() => {
-    const elementReference = activeAnchor.current
-
-    computeToolTipPosition({
+    let elementReference = activeAnchor.current
+    if (anchorId) {
+      // `anchorId` element takes precedence
+      elementReference = document.querySelector(`[id='${anchorId}']`) as HTMLElement
+    }
+    let mounted = true
+    computeTooltipPosition({
       place,
       offset,
       elementReference,
       tooltipReference: tooltipRef.current,
       tooltipArrowReference: tooltipArrowRef.current,
       strategy: positionStrategy,
     }).then((computedStylesData) => {
+      if (!mounted) {
+        // invalidate computed positions after unmount
+        return
+      }
       if (Object.keys(computedStylesData.tooltipStyles).length) {
         setInlineStyles(computedStylesData.tooltipStyles)
       }
@@ -173,7 +181,10 @@ const Tooltip = ({
         setInlineArrowStyles(computedStylesData.tooltipArrowStyles)
       }
     })
-  }, [show, isOpen, activeAnchor])
+    return () => {
+      mounted = false
+    }
+  }, [show, isOpen, anchorId, activeAnchor, place, offset, positionStrategy])
 
   useEffect(() => {
     return () => {

src/components/TooltipController/TooltipController.tsx

@@ -161,8 +161,10 @@ const TooltipController = ({
       observer.observe(ref.current, observerConfig)
     })
 
-    if (anchorById) {
-      const dataAttributes = getDataAttributesFromAnchorElement(anchorById)
+    const element = activeAnchor.current ?? anchorById
+
+    if (element) {
+      const dataAttributes = getDataAttributesFromAnchorElement(element)
       applyAllDataAttributesFromAnchorElement(dataAttributes)
     }
 

src/test/index.spec.js

@@ -1,6 +1,6 @@
 import renderer from 'react-test-renderer'
 import debounce from 'utils/debounce'
-import { computeToolTipPosition } from 'utils/compute-positions'
+import { computeTooltipPosition } from 'utils/compute-positions'
 import { TooltipController as Tooltip } from '../components/TooltipController'
 
 // Tell Jest to mock all timeout functions
@@ -58,7 +58,7 @@ describe('tooltip props', () => {
 
 describe('compute positions', () => {
   test('empty reference elements', async () => {
-    const value = await computeToolTipPosition({
+    const value = await computeTooltipPosition({
       elementReference: null,
       tooltipReference: null,
       tooltipArrowReference: null,
@@ -69,7 +69,7 @@ describe('compute positions', () => {
 
   test('empty tooltip reference element', async () => {
     const element = document.createElement('div')
-    const value = await computeToolTipPosition({
+    const value = await computeTooltipPosition({
       elementReference: element,
       tooltipReference: null,
       tooltipArrowReference: null,
@@ -81,7 +81,7 @@ describe('compute positions', () => {
   test('empty tooltip arrow reference element', async () => {
     const element = document.createElement('div')
     const elementTooltip = document.createElement('div')
-    const value = await computeToolTipPosition({
+    const value = await computeTooltipPosition({
       elementReference: element,
       tooltipReference: elementTooltip,
       tooltipArrowReference: null,
@@ -100,7 +100,7 @@ describe('compute positions', () => {
     const element = document.createElement('div')
     const elementTooltip = document.createElement('div')
     const elementTooltipArrow = document.createElement('div')
-    const value = await computeToolTipPosition({
+    const value = await computeTooltipPosition({
       elementReference: element,
       tooltipReference: elementTooltip,
       tooltipArrowReference: elementTooltipArrow,

src/utils/compute-positions.ts

@@ -1,7 +1,7 @@
 import { computePosition, offset, flip, shift, arrow } from '@floating-ui/dom'
 import type { IComputePositions } from './compute-positions-types'
 
-export const computeToolTipPosition = async ({
+export const computeTooltipPosition = async ({
   elementReference = null,
   tooltipReference = null,
   tooltipArrowReference = null,