Disable scroll to top after form submit

1

Hi,

I have a Stimulus controller on a form, on connect() I check if a scrolltoValue is not empty, if it is not I would like to scroll to this value element. If on connect() I call this.scrollToTarget() it just scrolls to the top, if I do setTimeout(() => this.scrollToTarget(), 0); it scrolls to the target but it starts scrolling to the top, so I can see 2 scrolls, the starting scroll to the top and then the scroll to the element.

Is there a way to disable scroll to top after form submit?

Thanks.

2

Looking for an answer to this as well. MY <form[action]> has a fragment in it:

<form id="form-element" action="/post/to/form.htm#form-element">

… an I’d like to scroll back down to the form upon error.

3

For what it’s worth, I’m going to try to solve this for the time-being with a search-parameter. Instead of using the fragment, I’m going to use ?scrollTo={ id } in the forwarding URL. Then, I’ll have a turbo:load event-handler that scrolls to the given element:

// Scroll down to the desired element (via ID selector).
document.documentElement.addEventListener(
	"turbo:load",
	function handleLoad( event ) {

		var searchParams = new URLSearchParams( location.search );
		var scrollTo = searchParams.get( "scrollTo" );

		if ( ! scrollTo ) {

			return;

		}

		document.querySelector( `#${ scrollTo }` )
			?.scrollIntoView()
		;

	}
);

Eventually, when Hotwire fixes the hash / fragment issue, I can just swap the query-string value for a fragment value, easy peasy.

4

Wrapping it with a turbo frame and setting the autoscroll attribute doesn’t seem to do anything either. At least not when returning a 422 status code.

5

Thanks for, at the very least, pointing out the autoscroll. I wasn’t aware that was there.