diff --git a/.changeset/wicked-balloons-sell.md b/.changeset/wicked-balloons-sell.md new file mode 100644 index 00000000000..bb30e17c775 --- /dev/null +++ b/.changeset/wicked-balloons-sell.md @@ -0,0 +1,5 @@ +--- +"@talend/design-system": patch +--- + +fix(DFD-914): Fix flashing tooltip on some gesture diff --git a/packages/design-system/src/components/Tooltip/Tooltip.tsx b/packages/design-system/src/components/Tooltip/Tooltip.tsx index 57f91d7c928..e1933e4bea3 100644 --- a/packages/design-system/src/components/Tooltip/Tooltip.tsx +++ b/packages/design-system/src/components/Tooltip/Tooltip.tsx @@ -1,21 +1,22 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ -import { useState, useRef } from 'react'; -import type { MutableRefObject, RefCallback, ReactElement, ReactNode } from 'react'; +import { useRef, useState } from 'react'; +import type { MutableRefObject, ReactElement, ReactNode, RefCallback } from 'react'; import { arrow, + autoUpdate, + flip, FloatingArrow, FloatingPortal, + offset, + safePolygon, + shift, + useDismiss, useFloating, - useHover, useFocus, - useDismiss, - useRole, + useHover, useInteractions, - autoUpdate, - flip, - offset, - shift, + useRole, } from '@floating-ui/react'; import { ChildOrGenerator, renderOrClone } from '../../renderOrClone'; @@ -79,7 +80,7 @@ export const Tooltip = ({ id, children, title, placement = 'top', ...rest }: Too ], whileElementsMounted: autoUpdate, }); - const hover = useHover(floating.context, { move: false }); + const hover = useHover(floating.context, { move: false, handleClose: safePolygon() }); const focus = useFocus(floating.context); const dismiss = useDismiss(floating.context); const role = useRole(floating.context, { role: 'tooltip' });