Enhanced form with `<button formaction>` scrolls to top of form on Chromium browsers
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 20.8k
- Forks
- 2.3k
- Avg merge
- 1d 16h
- Merged PRs (30d)
- 156
Description
Describe the bug
I have an enhanced form using SvelteKit, and I use <button formaction="?/addPet"> to add form inputs to the form. Its wrapping form has a separate action:
<form id="pet-form" method="POST" action="?/submit" use:enhance data-sveltekit-noscroll>
<!-- labels and inputs -->
<div>
<button style="--color-link: #444;" formaction="?/addPet">Add pet name</button>
<button>Submit form!</button>
</div>
</form>
On a Chromium browser, when clicking "Add pet name", the page scrolls to the top of the form. On Firefox and Safari, the scroll position stays put as expected.
Reproduction
Form example with issue: https://github.com/theetrain/sveltekit-formaction-issue-scroll
Logs
No response
System Info
System:
OS: macOS 12.6.3
CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
Memory: 3.48 GB / 16.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node
Yarn: 1.22.19 - ~/.nvm/versions/node/v18.12.1/bin/yarn
npm: 8.19.2 - ~/.nvm/versions/node/v18.12.1/bin/npm
Browsers:
Brave Browser: 111.1.49.120
Chrome: 111.0.5563.64
Firefox: 111.0
Safari: 16.3
npmPackages:
@sveltejs/adapter-auto: ^2.0.0 => 2.0.0
@sveltejs/kit: ^1.5.0 => 1.12.0
svelte: ^3.54.0 => 3.57.0
vite: ^4.0.0 => 4.2.0
Severity
annoyance
Additional Information
No response
Contributor guide
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 with the linked reproduction and the form-enhancement handling for POST forms with a button-level formaction. Reproduce the scroll change in Chromium, then trace how the enhanced submission handles scroll restoration. Done means clicking "Add pet name" preserves the current scroll position in Chromium without changing the expected behavior in Firefox or Safari.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100