CODEWITHSUNDEEP
javascriptsweetalert2
Davy
Davy

Reputation: 1796

sweet alert2: how to get autofocus on input?

using sweetalert2@8

Using sweet alert for a search box with below code. Autofocus works on Chrome but not on Safari & Firefox. How can we fix this?

swal.fire({
    // title: "Search",
    type: "question",
    html: '<form id="searchForm" method="post" action="/search">' +
        "<input type='hidden' />" +
        '<input autofocus class="form-control" type="text" name="search_box" placeholder="Seach..."></form>',
    confirmButtonText: "Search",
    showLoaderOnConfirm: true,
    preConfirm: function (value) {
        document.getElementById("searchForm").submit();
        return new Promise(resolve => {
        })
    },
});

Upvotes: 2

Views: 3582

Answers (2)

Limon Monte
Limon Monte

Reputation: 54439

Another option here would be to use the native .focus() method on input inside didOpen parameter of SweetAlert2:

Swal.fire({
  ...
  didOpen: () => {
    Swal.getHtmlContainer().querySelector('.custom-input').focus()
  }
})

Upvotes: 3

user4399002
user4399002

Reputation:

I suggest adding JavaScript code to polyfill the missing functionality you do not get in other browsers. Sweetalert2 also has a browser compatibility page here that says it's compatible in all major browsers. But also suggest using the following script tag to import the needed polyfill.

<!-- Include a polyfill for ES6 Promises (optional) for IE11 -->
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.js"></script>

As far as the autofocus attribute, it is also supported by all major browser according to MDN. You could try using a JavaScript event when the alert is fired that sets the autofocus property.

document.getElementById('myInput').autofocus = true;

You can also try to polyfill the autofocus property itself with this example here.

Upvotes: 1

Related Questions