javascript - Flatpickr + SweetAlert2 = 键盘辅助功能问题

Question

重现链接: 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 的原因。

Answer 1

默认情况下，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