diff --git a/change/@fluentui-react-tooltip-1a523606-fad3-4e83-bd04-c3e3645d474a.json b/change/@fluentui-react-tooltip-1a523606-fad3-4e83-bd04-c3e3645d474a.json new file mode 100644 index 0000000000000..893ec4a2fa5ef --- /dev/null +++ b/change/@fluentui-react-tooltip-1a523606-fad3-4e83-bd04-c3e3645d474a.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: The Tooltip should not hide if it gets keyboard focus", + "packageName": "@fluentui/react-tooltip", + "email": "behowell@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-tooltip/src/components/Tooltip/useTooltip.tsx b/packages/react-components/react-tooltip/src/components/Tooltip/useTooltip.tsx index a392877a9f4ee..e4b50762112c2 100644 --- a/packages/react-components/react-tooltip/src/components/Tooltip/useTooltip.tsx +++ b/packages/react-components/react-tooltip/src/components/Tooltip/useTooltip.tsx @@ -195,10 +195,12 @@ export const useTooltip_unstable = (props: TooltipProps): TooltipState => { [setDelayTimeout, setVisible, state.hideDelay, targetDocument], ); - // Cancel the hide timer when the pointer enters the tooltip, and restart it when the mouse leaves. - // This keeps the tooltip visible when the pointer is moved over it. + // Cancel the hide timer when the mouse or focus enters the tooltip, and restart it when the mouse or focus leaves. + // This keeps the tooltip visible when the mouse is moved over it, or it has focus within. state.content.onPointerEnter = mergeCallbacks(state.content.onPointerEnter, clearDelayTimeout); state.content.onPointerLeave = mergeCallbacks(state.content.onPointerLeave, onLeaveTrigger); + state.content.onFocus = mergeCallbacks(state.content.onFocus, clearDelayTimeout); + state.content.onBlur = mergeCallbacks(state.content.onBlur, onLeaveTrigger); const child = getTriggerChild(children);