Skip to content

fix: keep a click on a button that moved under a still pointer #1294

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

Open
arifhossen-dev wants to merge 2 commits into
base: production
Choose a base branch
from
+11 −8
Open

fix: keep a click on a button that moved under a still pointer #1294

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f0d9de8
fix: keep a click on a button that moved under a still pointer
arifhossen-dev Oct 29, 2026
1bec39a
fix: keep focus on a clicked button when the pointer then arms its to…
arifhossen-dev Oct 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 11 additions & 8 deletions resources/js/components/ui/tooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ function Tooltip({
isArmed,
arm: (byFocus) => {
takesFocus.current = byFocus
// At once: React waits to render after a pointer enters, and a click landing meanwhile would press the trigger
// At once: React waits to render after a pointer moves, and a click landing meanwhile would press the trigger
// before it is mounted again and be released on the new one, which loses it.
flushSync(() => setHasArmed(true))
},
Expand Down Expand Up @@ -97,7 +97,7 @@ function focusableIn(element: HTMLElement): HTMLElement | null {
function TooltipTrigger({
ref,
asChild,
onPointerEnter,
onPointerMove,
onFocus,
...props
}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
Expand All @@ -111,11 +111,14 @@ function TooltipTrigger({
ref={ref}
{...(!asChild && { type: "button" as const })}
{...props}
onPointerEnter={(event: React.PointerEvent<HTMLButtonElement>) => {
onPointerEnter?.(event)
// A tap would land on a trigger mounted again under the finger, and touch shows no tooltip anyway.
if (event.pointerType !== "touch") {
arming.arm(false)
onPointerMove={(event: React.PointerEvent<HTMLButtonElement>) => {
Comment thread
arifhossen-dev marked this conversation as resolved.
Resolved
onPointerMove?.(event)
// On a move with nothing pressed, not on entering: a trigger that scrolled or shifted under a still pointer
// is entered by the press itself, and mounting it again during a press would drop it. A tap would land on a
// trigger mounted again under the finger, and touch shows no tooltip anyway. A click that landed before any
// move left its button focused, which the trigger mounted again takes back.
if (event.pointerType !== "touch" && event.buttons === 0) {
Comment thread
coderabbitai[bot] marked this conversation as resolved.
Resolved
arming.arm(event.currentTarget.contains(document.activeElement))
}
}}
onFocus={(event: React.FocusEvent<HTMLButtonElement>) => {
Expand All @@ -140,7 +143,7 @@ function TooltipTrigger({
}
}}
asChild={asChild}
onPointerEnter={onPointerEnter}
onPointerMove={onPointerMove}
onFocus={onFocus}
{...props}
/>
Expand Down