Javascript ファイル選択ダイアログの後続処理について

下記HTMLファイルをIE,Chrome,Edgeでそれぞれ実行したところ、
IEは取込ボタンを押下したあと、ファイル選択後にアラートが表示されるのですが、
ChromeとEdgeは取込ボタンを押下したタイミングでアラートが表示されます。

IEはダイアログが消えるまで後続処理を待機しているみたいなのですが、
このことについて記載されたサイトなど見つけることが出来ず原因不明の状況です。
(私の環境だけなのでしょうか。)
わかる方いましたらご教示ください。

<html lang="ja">
 <head>
 <meta charset="utf-8">
 <script>
function InputFile()
{
var element=document.getElementById("btnHidImport");
element.click();
alert('TEST');
};
</script>
 <title>test</title>
 
</head>
<body>
<form name="f1">
<input type="button" value="取込" id="btnImport" onclick="InputFile()">
<input type="file" id="btnHidImport"  style="display:none;">
</form>
</body>
</html>

m.ts10806

2022/10/24 01:49

既にサポート終了しているIEのために調査をするのはかなり高コストだと思いますが、どういう要件でしょうか。

SUPER_SLiNKY

2022/10/24 02:20

IEからChromeへ移行作業をする際に見つけた不具合で、原因を調べて報告と解決策を出してほしいということでした。一応changeイベントで対応すればダイアログ選択後に後続処理を実行させるということはできたのですが、原因がわからないまま修正するのもあれだったので質問させていただきました。

行動規範の内容に同意します

回答2件

ベストアンサー

IEがどうだったとかはもう確認する必要がないので、あたらしいブラウザの環境で想定した動作が確認できればよいでしょう。

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  const showOpenFileDialog = ()=>new Promise(resolve => {
4    const input = Object.assign(
5      document.createElement('input'),
6      {type:'file',onchange:e =>resolve(e.target.files[0])}
7      );
8    input.click();
9  });
10  
11  btn.addEventListener('click',async ()=>{
12    const file = await showOpenFileDialog();
13    console.log(file );
14  });  
15
16});
17</script>
18<input type="button" value="取込" id="btn">