Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: add tooltip ignoreNonKeyboardFocus prop #2793

Closed
wants to merge 2 commits into from
Closed

feat: add tooltip ignoreNonKeyboardFocus prop #2793

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
37e7eae
feat: add tooltip ignoreNonKeyboardFocus prop
remonke Mar 21, 2024
cf82add
fix: version log
remonke Mar 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 3 additions & 0 deletions .yarn/versions/b59e8b96.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
releases:
"@radix-ui/react-tooltip": minor
primitives: minor
30 changes: 28 additions & 2 deletions packages/react/tooltip/src/Tooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ type TooltipProviderContextValue = {
onPointerInTransitChange(inTransit: boolean): void;
isPointerInTransitRef: React.MutableRefObject<boolean>;
disableHoverableContent: boolean;
ignoreNonKeyboardFocus: boolean;
};

const [TooltipProviderContextProvider, useTooltipProviderContext] =
Expand All @@ -60,6 +61,14 @@ interface TooltipProviderProps {
* @defaultValue false
*/
disableHoverableContent?: boolean;
/**
* Prevent the tooltip from opening if the focus did not come from
* the keyboard by matching against the `:focus-visible` selector.
* This is useful if you want to avoid opening it when switching
* browser tabs or closing a dialog.
* @defaultValue false
*/
ignoreNonKeyboardFocus?: boolean;
}

const TooltipProvider: React.FC<TooltipProviderProps> = (
Expand All @@ -70,6 +79,7 @@ const TooltipProvider: React.FC<TooltipProviderProps> = (
delayDuration = DEFAULT_DELAY_DURATION,
skipDelayDuration = 300,
disableHoverableContent = false,
ignoreNonKeyboardFocus = false,
children,
} = props;
const [isOpenDelayed, setIsOpenDelayed] = React.useState(true);
Expand Down Expand Up @@ -102,6 +112,7 @@ const TooltipProvider: React.FC<TooltipProviderProps> = (
isPointerInTransitRef.current = inTransit;
}, [])}
disableHoverableContent={disableHoverableContent}
ignoreNonKeyboardFocus={ignoreNonKeyboardFocus}
>
{children}
</TooltipProviderContextProvider>
Expand All @@ -127,6 +138,7 @@ type TooltipContextValue = {
onOpen(): void;
onClose(): void;
disableHoverableContent: boolean;
ignoreNonKeyboardFocus: boolean;
};

const [TooltipContextProvider, useTooltipContext] =
Expand All @@ -148,6 +160,14 @@ interface TooltipProps {
* @defaultValue false
*/
disableHoverableContent?: boolean;
/**
* Prevent the tooltip from opening if the focus did not come from
* the keyboard by matching against the `:focus-visible` selector.
* This is useful if you want to avoid opening it when switching
* browser tabs or closing a dialog.
* @defaultValue false
*/
ignoreNonKeyboardFocus?: boolean;
}

const Tooltip: React.FC<TooltipProps> = (props: ScopedProps<TooltipProps>) => {
Expand All @@ -158,6 +178,7 @@ const Tooltip: React.FC<TooltipProps> = (props: ScopedProps<TooltipProps>) => {
defaultOpen = false,
onOpenChange,
disableHoverableContent: disableHoverableContentProp,
ignoreNonKeyboardFocus: ignoreNonKeyboardFocusProp,
delayDuration: delayDurationProp,
} = props;
const providerContext = useTooltipProviderContext(TOOLTIP_NAME, props.__scopeTooltip);
Expand All @@ -167,6 +188,8 @@ const Tooltip: React.FC<TooltipProps> = (props: ScopedProps<TooltipProps>) => {
const openTimerRef = React.useRef(0);
const disableHoverableContent =
disableHoverableContentProp ?? providerContext.disableHoverableContent;
const ignoreNonKeyboardFocus =
ignoreNonKeyboardFocusProp ?? providerContext.ignoreNonKeyboardFocus;
const delayDuration = delayDurationProp ?? providerContext.delayDuration;
const wasOpenDelayedRef = React.useRef(false);
const [open = false, setOpen] = useControllableState({
Expand Down Expand Up @@ -236,6 +259,7 @@ const Tooltip: React.FC<TooltipProps> = (props: ScopedProps<TooltipProps>) => {
onOpen={handleOpen}
onClose={handleClose}
disableHoverableContent={disableHoverableContent}
ignoreNonKeyboardFocus={ignoreNonKeyboardFocus}
>
{children}
</TooltipContextProvider>
Expand Down Expand Up @@ -298,8 +322,10 @@ const TooltipTrigger = React.forwardRef<TooltipTriggerElement, TooltipTriggerPro
isPointerDownRef.current = true;
document.addEventListener('pointerup', handlePointerUp, { once: true });
})}
onFocus={composeEventHandlers(props.onFocus, () => {
if (!isPointerDownRef.current) context.onOpen();
onFocus={composeEventHandlers(props.onFocus, (event) => {
if (isPointerDownRef.current) return;
if (context.ignoreNonKeyboardFocus && !event.target.matches(':focus-visible')) return;
context.onOpen();
})}
onBlur={composeEventHandlers(props.onBlur, context.onClose)}
onClick={composeEventHandlers(props.onClick, context.onClose)}
Expand Down