CODEWITHSUNDEEP
javascriptsweetalertsweetalert2
Raymond Holguin
Raymond Holguin

Reputation: 1122

SweetAlert2 scrolls to initiating element after close

After closing of the modal I force the browser to scroll to the top of the page to see any error messages. After integrating the SweetAlert2 module to confirm submission the application will auto scroll back down to the submit button now after closing instead of staying at the top.

submit() {
    swal({
      title: "Submit application",
      html: "All submissions are final",
      type: "warning",
      showCancelButton: true,
      confirmButtonText: "Yes, delete it!",
      cancelButtonText: "Cancel"
    }).then(result => {
          window.scrollTo(0,0);
        }
    );
  }

As you can see I'm trying to force the scroll to the top in multiple areas and this works, but then it snaps back to the bottom. Please see attached gif as demonstration.

Scrolling error

Any ideas on how to fix this?

Bootstrap 4

SweetAlert2 7.28.2

EDIT: Reproduced in simple JSFiddle https://jsfiddle.net/s8f12xad/

Upvotes: 6

Views: 4094

Answers (3)

Haider Abbas
Haider Abbas

Reputation: 133

I know this is an old post but all mentioned above failed when I tested. The solution that worked is the following configuration option:

returnFocus: false,

Upvotes: 2

Limon Monte
Limon Monte

Reputation: 54439

didClose parameter is what you need in this case:

Swal.fire({
  didClose: () => window.scrollTo(0,0)
})

Upvotes: 8

Jesus Morales
Jesus Morales

Reputation: 11

Really ? the author answer you, thats its great !!!

I had a redirection problem which consisted of losing the navigation scroll, I solved it with this code:

Swal.fire({
    title: 'Example',
    type: 'success',
    onAfterClose: () => window.location.href = "url"
});

Thank you.

Upvotes: 1

Related Questions