[Popup] EdgeでPopupを表示すると、Popupのホスト要素にフォーカスが当たる
文書番号 : 81876
文書種別 : 制限事項
登録日 : 2016/11/22
最終更新日 : 2017/04/19
対象製品
Wijmo 5
発生環境
Microsoft Edgeのみ発生
詳細
EdgeでPopupを表示すると、Popupのホスト要素にフォーカスが当たってしまいます。
また、その状態でTabキーを押してもPopup内の要素にフォーカスが移動しません。
この現象は制限事項です。
本現象は、以下のようなサンプルでPopupの「header」div要素内にフォーカス可能な子要素がなく、またdiv要素自身にもtabindex属性がないために発生しています。このような場合、Edgeでは、div要素のtabindexに0となり、フォーカスが当たるようになります。
また、その状態でTabキーを押してもPopup内の要素にフォーカスが移動しません。
この現象は制限事項です。
本現象は、以下のようなサンプルでPopupの「header」div要素内にフォーカス可能な子要素がなく、またdiv要素自身にもtabindex属性がないために発生しています。このような場合、Edgeでは、div要素のtabindexに0となり、フォーカスが当たるようになります。
回避方法
下記コードのようにPopupの「header」div要素のtabindexを-1に設定します。
◆サンプルコード（HTML）
----------------------------------
<div id="message">
<div id="header" tabindex="-1">
タイトル
</div>
<input type="text"><br>
<input type="text"><br>
<input type="text">
<div id="footer">
<button>ボタン</button>
</div>
</div>
----------------------------------
◆サンプルコード（HTML）
----------------------------------
<div id="message">
<div id="header" tabindex="-1">
タイトル
</div>
<input type="text"><br>
<input type="text"><br>
<input type="text">
<div id="footer">
<button>ボタン</button>
</div>
</div>
----------------------------------