Page scrolls when clicking a toolbar input
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
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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