Prevent tooltips being stuck after navigation

This commit is contained in:
Sam Becker 2025-04-27 10:37:47 -05:00
parent f36df322a0
commit 52819b428b

View File

@ -63,6 +63,14 @@ export default function TooltipPrimitive({
</div>
: contentProp;
// Blur after clicking to prevent keyboard focus being stuck
// when tooltip is combined with a button
const blurActiveElement = () => {
if (document.activeElement instanceof HTMLElement) {
document.activeElement.blur();
}
};
return (
<Tooltip.Provider {...{ delayDuration, skipDelayDuration }}>
<Tooltip.Root open={includeButton ? isOpen : undefined}>
@ -70,12 +78,18 @@ export default function TooltipPrimitive({
{includeButton
? <button
ref={refTrigger}
onClick={() => setIsOpen(!isOpen)}
onClick={() => {
setIsOpen(!isOpen);
blurActiveElement();
}}
className={clsx('link', classNameTrigger)}
>
{children}
</button>
: <span className={classNameTrigger}>
: <span
className={classNameTrigger}
onClick={blurActiveElement}
>
{children}
</span>}
</Tooltip.Trigger>