dusk-network / dusk-network/duskit

refactor(components): investigate touch/pointer events for mobile long-press reliability on `Tooltip`s

Open
#298 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

need:brainstorm need:feedback
Dominant language
JavaScript
Stars
2
Forks
0
PR merge metrics
No merged PRs in 30d

Description

Description
Following our recent bugfix for rapid taps on mobile, we have uncovered a structural limitation in how we handle mobile long-presses for the Tooltip component, specifically on Android.

The current tooltip logic relies entirely on synthetic mouse/focus events (focusin, mouseenter). This creates a "focus trap" scenario:

  1. Initial Interaction: A user taps a toggle button. The browser fires focusin, our tap-handler cancels the tooltip, and the button changes state. Crucially, the button retains focus.
  2. Subsequent Long-Press: The user performs a long-press on the same button to read its tooltip.
  3. The Failure: Because the button is already focused, the mobile browser does not dispatch a new focusin or mouseenter event. Our tooltip component remains completely unaware of the user's finger on the screen.
  4. Workaround: The user must tap outside the button to remove focus (blur) before a long-press will work. This is unacceptable UX.

The Challenge
To fix this, we need to stop relying on legacy synthetic events for mobile and start listening to native touch interactions (touchstart/touchend or modern pointerdown/pointerup).

However, this is non-trivial. Implementing touch/pointer events requires:

  • Carefully managing custom timers directly tied to the touch lifecycle.
  • Preventing duplicate event firing (since mobile browsers will still fire mouseenter after a touchstart to support legacy code).
  • Ensuring that scrolling the page doesn't accidentally trigger tooltips (handling touchmove or pointercancel).
  • Guaranteeing that desktop interactions (hovering with a real mouse) remain completely unaffected and performant.

Next Steps (Brainstorming Required)
We need to discuss the architectural approach before writing code.

  • Should we migrate the entire Tooltip event architecture to the unified PointerEvents API?
  • Or should we keep the current mouse/keyboard events for desktop and surgically attach explicit touchstart/touchend listeners for mobile overrides?

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by locating the Tooltip component and the recent rapid-tap mobile bugfix, then trace how focusin and mouseenter currently drive tooltip behavior. Compare a unified Pointer Events approach with explicit touch listeners, including timer ownership, duplicate events, cancellation during scrolling, and desktop behavior. Done means the project has an agreed architectural direction and clear acceptance criteria before implementation begins.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Refactor
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Needs clarification
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.