Internet Explorer에서 element-ui 사용하기(한글 입력 오류)

UPDATE: 오류 발생 확인(v2.9.1)

UPDATE: 오류 발생 확인(v2.5.4)

한글 입력이 제대로 되지 않는 오류가 재발생했다(issue link). 하기 해결책으로 조치 가능한지 확인해보지 못했다. v2.5.2는 이상없다고 하니(issue link), element-ui를 꼭 사용하고 싶다면 이 버전을 사용해보자.

문제

v2.9.1 기준으로 IE(Internet Explorer)11에서 element-ui를 사용하면 아래와 같은 오류가 뜬다. 한글 입력이 잘 안된다.

Google Chrome에서는 물론(?) 잘 된다.

원인

element-ui는 중국어 사용자 위주로 만들어져 있다. default 언어가 중국어로 되어 있을 정도다. 그러다보니 form의 input box도 중국어가 먼저인데, input box에 입력하는 한 글자가 완성되기 전까지 기다리는 로직이 있다. 이게 IE에서 오작동하는 것.

해결책

여기를 참고하면 된다. valueBeforeComposition 와 관련된 코드를 다 지워버리자. 2번 방법을 추천한다.

1. node_modules 직접 수정

내 프로젝트의 node_modules 디렉토리에서 아래 파일들을 수정하면 된다.

- /node_modules/element-ui/lib/input.js

- /node_modules/element-ui/lib/element-ui.common.js

2. element-ui 소스 수정한 후, 배포판 빌드

element-ui github 저장소에서 clone 받은 후, /packages/input/src/input.vue 파일을 수정한다. 그리고 npm run dist를 날려주고 그 결과물을 내 프로젝트에 넣는다.

위 문제를 해결한 버전(v2.9.1 기반)을 내 github 저장소에 올려두었다. master 브랜치든, dev 브랜치든 clone 받은 후, 콘솔창에서 해당 경로에 들어가 npm run dist를 날려준 후, 빌드 결과물을 작업 중인 프로젝트의 node_modules/element-ui 폴더에 복사 붙여넣기 하면 된다.

직접 소스를 수정하려면 다음 링크를 참조하시라.

1. issue: https://github.com/ElemeFE/element/pull/15069
2. source code: https://raw.githubusercontent.com/ElemeFE/element/c1e76a3f01d7c51a5bdd6cb485e1e49d09007882/packages/input/src/input.vue

그 외

JiHyung Lee님이 위 문제를 해결하는 contribute를 하셨으니 다음 버전에서는 해결되리라 믿는다. 아마도 한글 입력 문제는 3.0 버전에서나 해결될 것 같다.

물론 polyfill은 필수다. 이 글을 참조하시라.

끝!