作成日: 2024/08/06 最終更新日: 2024/11/06
文書種別
不具合
状況
修正済み
詳細
モーダルポップアップ内にwj-labeled-inputクラスを設定したdiv要素を配置した際、div要素に配置したinput要素にフォーカスが遷移しません。
※なお、wj-labeled-inputクラス内に設定したinput要素にフォーカスを設定するにはtabIndexを設定する必要があります。
※なお、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
);