CODEWITHSUNDEEP
javascriptsweetalert
senty
senty

Reputation: 12857

SweetAlert - how to disable auto-focus on initial opening?

I am using SweetAlert and I have custom buttons like this example:

swal("A wild Pikachu appeared! What do you want to do?", {
  buttons: {
    cancel: "Run away!",
    catch: {
      text: "Throw Pokéball!",
      value: "catch",
    },
    defeat: true,
  },
  onOpen: function() { console.log("Test") } // this doesn't work
})
.then((value) => { ... });

However, on initial opening, it's focusing to the last button. Is there a way to cancel this auto-focus completely so on initial opening, it doesn't focus on any button?

Upvotes: 5

Views: 6611

Answers (2)

neves
neves

Reputation: 846

We can use didOpen and blur:

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
Swal.fire({
  html: "<b style='color: red;'>Remove</b> button focus!<br>Press ENTER to check.",
  didOpen: function () {
    Swal.getConfirmButton().blur()
  }
});
</script>

Upvotes: 1

Limon Monte
Limon Monte

Reputation: 54439

As already suggested in comments, SweetAlert2 is more flexible solution, I recommend using it.

With didOpen parameter and getConfirmButton() method you can achieve the desired behavior:

Swal.fire({
  input: 'text',
  inputPlaceholder: 'I will not be autofocuses',
  didOpen: () => Swal.getConfirmButton().focus()
})
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

Upvotes: 6

Related Questions