Scroll to success message in HTMX mode

[medienbaecker]

How do you scroll to the success message on long pages with forms when using the HTMX mode? Do I have to hook into HTMX's events?

[tobimori]

When HTMX mode is enabled, the user should stay at the same location as when they pressed the submit button.

[medienbaecker]

Yes, but then the success message is probably shorter than the form and the user ends up at the bottom of the page. For example this form is relatively long: https://verlagegegenrechts.de/materialien

[tobimori]

Can you test if this change works? https://github.com/tobimori/kirby-dreamform/commit/3330c040baf95842c03ec33256ad7bb4fedd8f24

[medienbaecker]

Maybe related, defining an hx-indicator also means I have to use a custom form snippet, correct?

[tobimori]

If you want a spinner in the button, you'd create a custom button snippet in site/snippets/dreamform/fields/button.php and then add the hx-indicator attribute to the form element via the dreamform/form snippet call.

[medienbaecker]

That works, but shouldn't it also scroll to the top when there's an error message (above the form)?

[tobimori]

With the change it should always scroll to the top, so even when an error happens.

[tobimori]

You could also add the indicator via CSS/pseudo elements controlled via the htmx-request class on the form element.

[medienbaecker]

I think you want show:top instead.

[tobimori]

Switched to show:top, will close for now since that's solved. Thanks!

[medienbaecker]

Awesome, thank you.