モーダルポップアップ内にwj-labeled-inputクラスを設定したdiv要素を配置した際、div要素に配置したinput要素にフォーカスが遷移しません。

※なお、wj-labeled-inputクラス内に設定したinput要素にフォーカスを設定するにはtabIndexを設定する必要があります。

この問題はバージョン5.20242.21で修正されました。

修正版を適用しない場合の回避方法は次の通りです。

CSSとJavaScriptで以下の処理を追加します。

CSS

.focused:focus {
  outline: none;
}

.focused::after {
  outline: 2px solid steelblue !important;
}

JavaScript

// フォーカス可能な要素のリストを取得する
function getFocusElements(e, t) {
  void 0 === t && (t = !1);
  var n = [],
    i = Array.prototype.slice.call(
      e.querySelectorAll("input,select,textarea,button,a,div,label")
    ),
    r = {},
    isRb = function (e) {
       return e instanceof HTMLInputElement && "radio" === e.type;
    };
  i.forEach(function (e) {
    isRb(e) && e.checked && (r[e.name || ""] = !0);
  });
  (i = i.filter(function (e) {
    return !isRb(e) || e.checked || !r[e.name || ""];
  })).sort(function (e, t) {
    return e.tabIndex - t.tabIndex;
  });
  for (var o = 0; o < i.length; o++) {
    var s = i[o];
    if (
      s.offsetHeight > 0 &&
      s.tabIndex > -1 &&
      !s.disabled &&
      "hidden" !== window.getComputedStyle(s).visibility &&
      !wijmo.closest(s, "[disabled],.wj-state-disabled")
    ) {
      if (s instanceof HTMLAnchorElement && !s.hasAttribute("href"))
        continue;
      if ("radio" === s.type && !s.checked && n.length > 0) {
        var l = n[n.length - 1];
        if ("radio" === l.type && l.name === s.name) {
          t && (n[n.length - 1] = s);
          continue;
        }
      }
      (!wijmo.Control.getControl(s) && getFocusElements(s).length) ||
        n.push(s);
    }
   }
   return n;
}

// フォーカスを次のフォーカス可能な要素に移動するカスタムフォーカス移動関数
moveFocus = function (e, t) {
  var n = getFocusElements(e, t < 0),
    i = 0;
  if (t) {
    var r = n.indexOf(wijmo.getActiveElement());
    r > -1 && (i = (r + t + n.length) % n.length);
  }
  if (i < n.length) {
    var o = n[i];
    o.focus();
    o instanceof HTMLInputElement && o.select();
    return !0;
  }
  return !1;
};

let frmLogin = new wijmo.input.Popup("#frmTest");

// Tabキーを手動で使用して要素にフォーカスするためにkeydownイベントを処理する
frmLogin.hostElement.addEventListener(
  "keydown",
  (e) => {
    if (e.key == "Tab") {
      e.stopImmediatePropagation();
      e.preventDefault();
      moveFocus(frmLogin.hostElement, 1);
    }
  },
  true
);