Search code examples
javascripthtmlsweetalert2flatpickr

Flatpickr + SweetAlert2 = Keyboard accessibility issues

Repro link: https://jsfiddle.net/isaporto/hav7pqs5/

HTML:

<button>
 Click here
</button>

JS:

document.querySelector('button').addEventListener('click', () => {
  Swal.fire({
    title: 'Select a date',
    html: `<div id="modal-content">
             <form>
               <input type="text" class="flatpickr">
             </form>
           </div>`,
    showConfirmButton: false,
  })
  flatpickr(".flatpickr", {
    dateFormat: "d/m/Y",
    minDate: new Date(),
    static: true
  })
})

When the datepickr input is focused and the user click on the down arrow key, it is supposed to focus and allow us to navigate through the flatpick calender using the keyboard, but inside the sweetalert modal this doesn't occur Unlike bootstrap modal, the Sweetalert2 modal is inserted in the tree by ajax, but I don't know if is this the cause of the bug.

Solution

  • By default, SweetAlert2 will stop propagation of keydown events to the document when the modal is shown.

    On the other hand, Flatpickr is adding its popup to the document's body, outside of SweetAlert2 container.

    In order to fix the keyboard a11y for Flatpickr inside of SweetAlert2 you have to enable propagation of keydown events by using the stopKeydownPropagation parameter:

    Swal.fire({
  ...
  stopKeydownPropagation: false
})

    The live demo of Flatpickr inside of SweetAlert2 can be found here: https://sweetalert2.github.io/recipe-gallery/input-date-flatpickr.html