読者です 読者をやめる 読者になる 読者になる

IE edgeで<labal>に<input type="file">をネストすると無限ループする問題への対策

フロントエンド

現象

IE edgeでファイルアップロードのダイアログが無限ループするバグがあったので、この問題への公式の発表と対応方法をまとめました。

 

環境:IE edge

HTML

 

Microsoft公式の発表

https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8282613/

label>input type=fileをネストするとダイアログが無限ループする

この問題はlabelとinputをネストさせずに兄弟関係にすれば発生しない。

JS-generated <label><input type="file"></label> causes infinite loop of opening file dialog

(中略) 

this problem does not happen if the <label> and <input> are siblings, rather than being nested.

 

対応策

ネストしてるとだめなので、まずはマークアップを兄弟関係にします。

HTML

CSS

#file { display: none; }

IEは何かとお騒がせなブラウザですね