v150 · User Input

Event Sequence Visualizer

Click or drag-select inside the textarea below. The log shows every event in the order it fires, and what selectionStart / selectionEnd reads at each moment — demonstrating that Chrome 150 updates the selection before dispatching click.

Detecting Chrome version…
Event log
# event selStart selEnd note
Click or drag inside the text area to populate the log.

Click handler comparison

Immediate (click handler reads directly)
—
In Chrome 150+: always correct.
Deferred (setTimeout 0 workaround)
—
In Chrome 150+: same value — workaround is no longer needed.

why the order matters

Before Chrome 150, the browser dispatched click before applying the default action of mouseup (which collapses or commits the drag-selection). Click handlers that read selectionStart / selectionEnd saw the pre-click selection — usually the previous state. Developers worked around this by deferring the read with setTimeout(fn, 0). Chrome 150 fixes the order: default action runs, then click fires. The workaround becomes dead code.

// Before Chrome 150: had to defer to get correct selection
textarea.addEventListener('click', () => {
  setTimeout(() => {
    console.log(textarea.selectionStart, textarea.selectionEnd); // correct
  }, 0);
});

// Chrome 150+: direct read is always correct
textarea.addEventListener('click', () => {
  console.log(textarea.selectionStart, textarea.selectionEnd); // correct
});

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗