不关注 Swal 输入答案

【问题标题】：Do not focus Swal input不关注 Swal 输入
【发布时间】：2022-10-17 23:26:43
【问题描述】：

我有一个带输入的标准 Swal。

Swal.fire({
  ...
  text: "legend",
  input: "text",
  customClass: { popup: "datepicker-container" },
  ...
  preConfirm: (inputValue) => {
    ...
  },
  willClose: () => {
    if (datepicker) datepicker.destroy();
  },
});

datepicker-container 类允许使用 Pickaday 日期选择器增强输入。

我有行为：

日期选择器在最终位置的显示
Swal 弹出动画
在动画结束时，输入位于最终位置，因此元素的日期选择器与输入匹配

所以有两个选择，来解决这个问题：
1. 不要在渲染时关注输入值，因此仅在用户输入时显示日期选择器
2. 仅在动画结束时输入焦点，仅在输入位于最终位置时显示日期选择器
  对于解决方案 1. 我尝试了几个焦点选项（focusConfirm，focusCancel），但没有结果。我试图将确认按钮集中在didRender 上，但是由于在此处理程序之后在屏幕上重新绘制了弹出窗口，因此没有效果。唯一的效果是：
```
  didOpen: () => {
    Swal.getConfirmButton().focus();
  },
```
  但是日期选择器会闪烁。它仍然在 swal 初始渲染时显示。
  
  对于解决方案 2.，我认为无法配置它。但这是origin project 中的行为，这就是我在这里提出问题的原因，而不是SweetAlert2 Github 的问题。

【问题讨论】：

标签： javascript sweetalert2 pikaday

【解决方案1】：

最后，在项目维护者（https://github.com/sweetalert2/sweetalert2/issues/2526）提出的解决方法之后，我处理了弹出动画的结束。

解决方案现场演示：https://codepen.io/plouf142/pen/KKRYoVe

/**
 * Depending on the browser, detect the supported event property name
 * for the End of CSS Animations.
 * From https://jonsuh.com/blog/detect-the-end-of-css-animations-and-transitions-with-javascript/
 *
 * @returns {String}, the name of the property name for the end of animations
 */
function whichAnimationEvent() {
  var t,
    el = document.createElement("fakeelement");

  var animations = {
    animation: "animationend",
    OAnimation: "oAnimationEnd",
    MozAnimation: "animationend",
    WebkitAnimation: "webkitAnimationEnd"
  };

  for (t in animations) {
    if (el.style[t] !== undefined) {
      return animations[t];
    }
  }
}

// Event name fired on animation end (browser dependent)
var animationEvent = whichAnimationEvent();

/**
 * Handle end of show animation of the Swal popup.
 * This is the event when the popup is displayed at its final position
 */
function onSwalShowPopupAnimationEnded() {
  this.removeEventListener(animationEvent, onSwalShowPopupAnimationEnded);

  // Show datepicker associated with Swal input
  let input = Swal.getInput();
  input && input.click();
}

var datepicker = null;

Swal.fire({
  text: "Legend...",
  input: "text",
  didOpen: () => {
    let field = Swal.getInput();

    datepicker = new Pikaday({ field: field });

    // Wait end of animation
    animationEvent &&
      Swal.getPopup().addEventListener(
        animationEvent,
        onSwalShowPopupAnimationEnded
      );
  },
  willClose: () => {
    if (datepicker) datepicker.destroy();
  }
});

【讨论】：