sveltejs / sveltejs/kit

`data-sveltekit-keepfocus` does not work on POST forms

Open
#10,796 6 comments 14 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

forms
Dominant language
JavaScript
Stars
20.8k
Forks
2.3k
Avg merge
1d 16h
Merged PRs (30d)
156

Description

UPDATE: As explained by @s3812497 - I was confused and missed the info in the dosc, that this only works for GET forms, this would be a feature request for POST forms then as well.

There were two tickets related to this: https://github.com/sveltejs/kit/issues/7895 and https://github.com/sveltejs/kit/pull/9019 with the actual implementation.

The documentation confirms that we should be able to use data-sveltekit-keepfocus on a <form> element not to loose focus after the form is being submitted.

This seem not to work for me. Nor for forms with use:enhance, neither for those without. I've created a simple reproduction code: https://stackblitz.com/edit/sveltejs-kit-template-default-du58bc?file=src%2Froutes%2F%2Bpage.svelte Either that, or I don't fully understand how should it work from the docs.

Reproduction
  1. Create a POST form and make it use:enhance
  2. Add data-sveltekit-keepfocus attribute to it
  3. Submit the form on:input

or use https://stackblitz.com/edit/sveltejs-kit-template-default-du58bc?file=src%2Froutes%2F%2Bpage.svelte

Severity

serious, but I can work around it

Contributor guide

Open the contributing guide

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 with the linked StackBlitz reproduction, especially src/routes/+page.svelte, and read the data-sveltekit-keepfocus documentation alongside issues #7895 and pull request #9019. Compare the documented GET-form behavior with POST forms using use:enhance and without it. Done means the requested focus-preservation behavior is defined and verified for POST submission.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend, web-dev
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
32/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.