Using SweetAlert2 for navigating inside the pages and not focusing on calling element

This one will be kind of a custom requirement. The problem I faced was when I tried using SweetAlert2 for adding alerts, I had this strange requirement. Based on the users' input, after the alert is dismissed, I need to navigate them to another section in the page. Instead, the default behaviour of SweetAlert2 is to focus the alert initiated element (the element that you clicked to get the SweetAlert2).

I tried meddling with the code and found out the secret lies in the promises. Well, this is my scenario, which is implemented in my website, which will be live from June 25th.

See the Pen SweetAlerts2 by Praveen Kumar (@praveenscience) on CodePen.

Since it didn't allow me to do anything else other than going back to the original code, I had to change the way it works and finally found out that the issue was in the way, the promise reacts after it has been called.

So adding two functions, one for return and other for reject, what I did was:

swal({  
  type: 'success',
  text: 'Enter Code.',
  timer: 500
}).then(function() {
  document.activeElement.blur();
  $('html, body').animate({
    scrollTop: $("#contact").offset().top - 10
  }, 500);
}, function () {
  document.activeElement.blur();
  $('html, body').animate({
    scrollTop: $("#contact").offset().top - 10
  }, 500);
});

In simple words...

Problem: SweetAlert2 is focussing back to the initiated element.

Expectation: It should navigate to another section in the page.

Solution: Use promise's return and reject, like the code below, the then() is the promise's next step, taking two functions as paramter:

swal({  
  type: 'success',
  text: 'Enter Code.',
  timer: 500
}).then(function() {
  document.activeElement.blur();
  $('html, body').animate({
    scrollTop: $("#contact").offset().top - 10
  }, 500);
}, function () {
  document.activeElement.blur();
  $('html, body').animate({
    scrollTop: $("#contact").offset().top - 10
  }, 500);
});

The first function executes when the confirm button is clicked and the second one executes when the cancel button is clicked. So, for both the cases, the first thing you need to do is to avoid the focussing of initiating element.

document.activeElement.blur();  

The next step, use your custom scrolling function:

$('html, body').animate({
  scrollTop: $("#contact").offset().top - 10
}, 500);

I have used the basic default scrolling based on an element's top offset. Hope this was useful to someone who needs to perform such an activity. Pen down your views in the comments below.