diff --git a/packages/tooltip/src/TooltipContainer.js b/packages/tooltip/src/TooltipContainer.js
index f415edfa3..da847b708 100644
--- a/packages/tooltip/src/TooltipContainer.js
+++ b/packages/tooltip/src/TooltipContainer.js
@@ -16,7 +16,6 @@ export function TooltipContainer({ children, render = children, ...options }) {
TooltipContainer.propTypes = {
children: PropTypes.func,
render: PropTypes.func,
- tooltipRef: PropTypes.shape({ current: PropTypes.instanceOf(Element) }).isRequired,
delayMilliseconds: PropTypes.number,
isVisible: PropTypes.bool
};
diff --git a/packages/tooltip/src/TooltipContainer.spec.js b/packages/tooltip/src/TooltipContainer.spec.js
index f1371bfe7..eb9761b96 100644
--- a/packages/tooltip/src/TooltipContainer.spec.js
+++ b/packages/tooltip/src/TooltipContainer.spec.js
@@ -5,7 +5,7 @@
* found at http://www.apache.org/licenses/LICENSE-2.0.
*/
-import React, { useRef } from 'react';
+import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import { act } from 'react-dom/test-utils';
@@ -17,17 +17,14 @@ describe('TooltipContainer', () => {
const TOOLTIP_ID = 'test';
const BasicExample = props => {
- const tooltipRef = useRef(null);
-
return (
-
+
{({ getTooltipProps, getTriggerProps }) => (
<>
trigger
tooltip
diff --git a/packages/tooltip/src/useTooltip.js b/packages/tooltip/src/useTooltip.js
index 7e4a1fa8c..0e43d5f9b 100644
--- a/packages/tooltip/src/useTooltip.js
+++ b/packages/tooltip/src/useTooltip.js
@@ -5,12 +5,13 @@
* found at http://www.apache.org/licenses/LICENSE-2.0.
*/
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
import { composeEventHandlers, generateId, KEY_CODES } from '@zendeskgarden/container-utilities';
-export function useTooltip({ tooltipRef, delayMilliseconds = 500, id, isVisible } = {}) {
+export function useTooltip({ delayMilliseconds = 500, id, isVisible } = {}) {
const [visibility, setVisibility] = useState(isVisible);
const [_id] = useState(id || generateId('garden-tooltip-container'));
+ const isMounted = useRef(false);
let openTooltipTimeout;
let closeTooltipTimeout;
@@ -19,7 +20,7 @@ export function useTooltip({ tooltipRef, delayMilliseconds = 500, id, isVisible
clearTimeout(closeTooltipTimeout);
openTooltipTimeout = setTimeout(() => {
- if (tooltipRef.current) {
+ if (isMounted.current) {
setVisibility(true);
}
}, delayMs);
@@ -29,12 +30,23 @@ export function useTooltip({ tooltipRef, delayMilliseconds = 500, id, isVisible
clearTimeout(openTooltipTimeout);
closeTooltipTimeout = setTimeout(() => {
- if (tooltipRef.current) {
+ if (isMounted.current) {
setVisibility(false);
}
}, delayMs);
};
+ // Sometimes the timeout will call setVisibility even after unmount and cleanup
+ // reproducable when running tests, happens when fast switching in storybook.
+ // May be related https://github.com/facebook/react/pull/15650
+ useEffect(() => {
+ isMounted.current = true;
+
+ return () => {
+ isMounted.current = false;
+ };
+ }, []);
+
// Clean up stray timeouts if tooltip unmounts
useEffect(() => {
return () => {