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は何かとお騒がせなブラウザですね