Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Bug: Dragging a selection past the edge of an editable CodeView collapses it, then stops it growing

Open
  • Is something wrong?
#1,189 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
35/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Active
Tech stack
typescript
Domain
frontend

Research direction

Start with the tail of __syncRenderView and the #focus(position) method, which the issue says overwrites a live drag selection, and check #isContentMouseDown. Run the linked repro repo, dragging past the scroller edge in an editable CodeView, to confirm the collapse. Done means the selection keeps its anchor and grows while the button is held. The freeze part needs a design decision on who owns the held-drag selection, so settle that before coding.

Written by the indexing model from the issue text.

Description

bug
Prerequisites
Describe the issue

In a CodeView with edit: true, dragging a selection past the edge of the scroller doesn't work the way it does in a text editor. Click on a line and drag below the scroller and the view auto-scrolls as expected, but two things go wrong after that:

  1. The selection collapses to a caret at the anchor line on the next re-render, so you end up with nothing selected.
  2. With that fixed (patch below), the selection survives but stops growing at the row where the pointer left the scroller. The view keeps scrolling and the selection doesn't follow.

In VS Code, or in a plain textarea, the selection keeps its start at the anchor line and grows for as long as the button is held. For us this shows up when someone selects a block in a long file to copy it or comment on it: they either lose the selection or get a fraction of what they dragged over.

Seen on @pierre/[email protected], Chromium (Electron 44)

Steps
  • A CodeView with one diff item, edit: true, a few hundred lines long so it is taller than the scroller
  • Click near the top and drag below the scroller's bottom edge
  • Watch the selection as the view scrolls: it collapses to a caret. With the patch below applied, it holds but stops at the row where the pointer left the scroller
Potential cause

From the source:

  1. The collapse. The tail of __syncRenderView restores focus with #restoreReplacementFocus() or this.focus({ preventScroll: true }) without checking #isContentMouseDown. Both reach #focus(position), which writes a collapsed selection at position over the live drag selection.
  2. The freeze. Past the scroller's edge the selection is the browser's native one. The browser doesn't extend a held drag into rows that are rendered or recycled while it auto-scrolls. If the anchor's row is virtualized out mid-drag, the browser drops that end too.
Suggested fix

For the collapse, we're carrying this local patch against 1.5.2 and would be glad to drop it:

  • add && !this.#isContentMouseDown to both else if conditions at the tail of __syncRenderView;
  • add if (position !== void 0 && this.#isContentMouseDown) return; after this.#contentHasFocus = true; in #focus.

For the freeze, could the editor own the held drag's selection? It could keep the anchor from the press in its model, hit-test the edge row on each scroll while the button is held, and write the selection from the model, the way it already restores the selection after a render. That would also fix the dropped anchor.

Reproduction

https://github.com/eamodio/pierre-diffs-drag-repro

What browser(s) are you seeing the problem on?

Chrome

What version of @pierre/diffs are you using?

1.5.2

Dominant language
TypeScript
Stars
6.2k
Forks
226
Avg merge
1d 1h
Merged PRs (30d)
29

Getting set up

This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.

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.

More from pierrecomputer/pierre

All issues in pierrecomputer/pierre

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.