Flatpickr + SweetAlert2 = 键盘可访问性问题

如何解决Flatpickr + SweetAlert2 = 键盘可访问性问题

转载链接： 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
  })
})

当 datepickr 输入被聚焦并且用户点击向下箭头键时，它应该聚焦并允许我们使用键盘在 flatpick 日历中导航，但在 sweetalert 模式中这不会发生 与bootstrap modal不同的是，Sweetalert2 modal是通过ajax插入树中的，不知道是不是这个bug的原因。

解决方法

默认情况下，SweetAlert2 将在显示模态时停止将 keydown 事件传播到文档。

另一方面，Flatpickr 将其弹出窗口添加到文档的 body 中，位于 SweetAlert2 容器之外。

为了修复 SweetAlert2 中 Flatpickr 的键盘 a11y，您必须使用 stopKeydownPropagation 参数启用 keydown 事件的传播：

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

可以在此处找到 SweetAlert2 中 Flatpickr 的现场演示：https://sweetalert2.github.io/recipe-gallery/input-date-flatpickr.html