IE input file type (file uploader) 동작 차이

IE에서 tab으로 input file type 태그 선택 후 enter로 선택 시 에러 발생

<input type="file" />

 

IE에서 input tag 선택 방법에 따른 동작이 다름

- enter : form submit

- click : file selecter open

 

React에서 아래와 같은 방식으로 해결 가능

...

const handleKeyDown = event => {
  const { keyCode, target } = event;
   if (keyCode === ENTER_KEY_CODE) {
    event.preventDefault();
    target.click();
  }
};

...

return (
  ...
  <input
    type="file"
    accept="image/*"
    onKeyDown={handleKeyDown}
  />
  ...
);