From 9b2c3176c8e1fcd8be3bf41b7cb5db674ffafc7f Mon Sep 17 00:00:00 2001 From: Ben Howell Date: Fri, 7 Oct 2022 13:44:56 -0700 Subject: [PATCH 1/2] fix: The Tooltip should not hide if it gets keyboard focus --- ...react-tooltip-1a523606-fad3-4e83-bd04-c3e3645d474a.json | 7 +++++++ .../react-tooltip/src/components/Tooltip/useTooltip.tsx | 2 ++ 2 files changed, 9 insertions(+) create mode 100644 change/@fluentui-react-tooltip-1a523606-fad3-4e83-bd04-c3e3645d474a.json 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 00000000000000..893ec4a2fa5ef2 --- /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 a392877a9f4eee..1bd9aa32997452 100644 --- a/packages/react-components/react-tooltip/src/components/Tooltip/useTooltip.tsx +++ b/packages/react-components/react-tooltip/src/components/Tooltip/useTooltip.tsx @@ -199,6 +199,8 @@ export const useTooltip_unstable = (props: TooltipProps): TooltipState => { // This keeps the tooltip visible when the pointer is moved over it. 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); From ed1c0fecd343c29167984fd4ac5a8803e8d4e63e Mon Sep 17 00:00:00 2001 From: Ben Howell Date: Fri, 7 Oct 2022 13:51:57 -0700 Subject: [PATCH 2/2] Fix comment --- .../react-tooltip/src/components/Tooltip/useTooltip.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 1bd9aa32997452..e4b50762112c20 100644 --- a/packages/react-components/react-tooltip/src/components/Tooltip/useTooltip.tsx +++ b/packages/react-components/react-tooltip/src/components/Tooltip/useTooltip.tsx @@ -195,8 +195,8 @@ 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);