BACK
Use casesSingle vs double click — select or open
Use cases · 55

Single vs double click — select or open

Pattern

A desktop UI with a table: one click selects a row, a double click opens the card. Two different actions on the same mouse button. You need to wait a short pause to tell whether it was a single or a double click.

The problem it solves

Do select right on the first click and, on a double click, select fires first and then the card opens. You get visual junk: the row highlights + a transition. Imperative setTimeout flags complicate the logic and break easily.

Operators and why they matter

  • buffer(closingNotifier$) — collects clicks until the notifier fires.
  • debounceTime on the same click stream — creates the closing notifier after a short pause.
  • map(clicks => clicks.length) — count the clicks in the buffer.
  • filter(count => count > 0) — drop empty buffers.

Gotchas

  • If the action fires right on the click, a double click will always trigger select first.
  • throttleTime doesn't fit here — it can't tell how many clicks happened in the window.
  • A long window (300ms+) makes a single click feel slow. The user shouldn't wait for the system to decide.

What you get

A single click after a pause → select. Two fast clicks → open. No needless intermediate actions.

script.ts // TypeScript
CONSOLE · Console output
Hit Run to see the result...