data-sveltekit-keepfocus does not work on POST forms

[z-x]

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: #7895 and #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

[eltigerchino]

I'll admit I've never used this option and was confused by the documentation. However, at the top of the page it does mention:

These options also apply to <form> elements with method="GET".

This could be made a bit clearer that it only works on GET form submissions? or is there a good case for keeping focus for POST form submissions? (seems we always reset even with use:enhance with no way to opt out)

[z-x]

@s3812497 - that would make sense. I totally missed it.

or is there a good case for keeping focus for POST form submissions?

Sure there is. You don't really have to have a 'submit' button on input fields for some cases (like 'a note for the item'). So I want to save some data by POST but allow the user to keep focus while editing it. For accessibility you just display the buttons in <noscript>.

Or currently I'm using the same thing on following profile edit form in tall.ly - you edit the inputs, but the form is submitted automatically and an status icon is displayed on save

[rikardkling]

I would also need this for a POST form using autosave. Whats your current workaround @z-x?

[z-x]

@rikardkling - https://twitter.com/z_x/status/1731347776280092873

You can temporarily set autofocus on the field that is being edited. Not pretty, language tools will throw a warning for you, but I think it's better than implementing the use:enhance clone just for that use case.

<script>

import { enhance } from '$app/forms';

let isBeingEdited = false;

</script>



<form action="?/save" method="POST" use:enhance>

	<textarea
		name="note"
		on:focusin={() => isBeingEdited = true}
		on:focusout={() => isBeingEdited = false}
		autofocus={isBeingEdited}
		on:input={someSaveFunction}
	></textarea>

	<noscript>
		<button type="submit">Save</button>
	</noscript>

</form>

[XIYO]

Hello,

I hope this message finds you well. Please excuse any unintended rudeness as I am using a translation tool for communication.

I am reaching out to suggest the possibility of extending support for POST requests in addition to the existing functionality. The goal in my case is to achieve consistent results in both active and inactive states of JavaScript.

The use:enhance directive is indeed a fantastic feature. It provides a consistent feeling of developer experience (DX) without cluttering the code, which is highly appreciated. However, to maintain focus without losing it during POST requests, some workaround code becomes necessary.

For instance, if we consider liking the fifth feed out of ten using only the keyboard, under the current circumstances, to view the sixth post, it's required to track the last clicked like button of the feed with a state variable that can be provided to autofocus.

My question is, despite the anticipation that data-sveltekit-keepfocus would abstract such processes, why does it only support GET requests? Is there a specific reason for this limitation?

Thank you for your time and consideration.