michael / michael/svedit

Page scrolls when clicking a toolbar input

Open Beginner friendly
#342 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
675
Forks
18
Avg merge
5h 11m
Merged PRs (30d)
1

Description

What happens

Select some text, then click an input in the toolbar (for example the link URL field). The page scrolls, even though nothing should move.

Why

When the canvas loses focus to the input, Svedit re-renders the current selection. At the end of that, it scrolls the selected element into view:

// src/lib/Svedit.svelte (render_selection)
const selected_element = focus_node.parentElement;
setTimeout(() => {
	if (selected_element?.isConnected) {
		selected_element.scrollIntoView({ block: 'nearest', inline: 'nearest' });
	}
}, 0);

The comment above this code already mentions the case "app UI focuses an external input" — but the check only asks whether the element still exists, not whether the user has moved on to a toolbar input. So the scroll fires anyway.

On iOS this stacks with Safari's own behavior of scrolling the page to bring a focused input above the keyboard, which makes the jump worse.

Suggested fix

  • In the delayed scroll above, do nothing when the canvas is no longer focused: the user is interacting with app UI, so nothing should move.
  • Where the app focuses a toolbar input from code, use input.focus({ preventScroll: true }).

Contributor guide

No contributing guide indexed for this repository

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 in src/lib/Svedit.svelte at render_selection and inspect the delayed scrollIntoView call, then locate the toolbar input focus paths mentioned in the issue. Verify that selection updates do not scroll when the canvas has lost focus, and that programmatic toolbar-input focus uses preventScroll: true.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Quiet
Clarity
Clearly specified
Newbie friendliness
78/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.