diff --git a/components/lib/tooltip/Tooltip.js b/components/lib/tooltip/Tooltip.js index 6fb343f001..6d42c43707 100644 --- a/components/lib/tooltip/Tooltip.js +++ b/components/lib/tooltip/Tooltip.js @@ -14,6 +14,7 @@ export const Tooltip = React.memo( const [visibleState, setVisibleState] = React.useState(false); const [positionState, setPositionState] = React.useState(props.position || 'right'); const [classNameState, setClassNameState] = React.useState(''); + const [multipleFocusEvents, setMultipleFocusEvents] = React.useState(false); const metaData = { props, state: { @@ -110,7 +111,7 @@ export const Tooltip = React.memo( if (event === 'both') { showEvents = ['focus', 'mouseenter']; - hideEvents = ['blur', 'mouseleave']; + hideEvents = multipleFocusEvents ? ['blur'] : ['mouseleave', 'blur']; } } @@ -172,6 +173,8 @@ export const Tooltip = React.memo( }; const show = (e) => { + if(e.type && e.type==="focus") setMultipleFocusEvents(true); + currentTargetRef.current = e.currentTarget; const disabled = isDisabled(currentTargetRef.current); const empty = isContentEmpty(isShowOnDisabled(currentTargetRef.current) && disabled ? currentTargetRef.current.firstChild : currentTargetRef.current); @@ -198,6 +201,8 @@ export const Tooltip = React.memo( }; const hide = (e) => { + if(e && e.type==="blur") setMultipleFocusEvents(false); + clearTimeouts(); if (visibleState) {