YoungSeon.Ahn

I am an ordinary person.

1 minute read

UPDATE: Bug confirmed (v2.9.1)

UPDATE: Bug confirmed (v2.5.4)

The bug where Korean input does not work properly has resurfaced (issue link). I have not been able to verify whether the solution below resolves it. Apparently v2.5.2 is fine (issue link), so if you really want to use element-ui, try this version.

The Problem

As of v2.9.1, when you use element-ui in IE (Internet Explorer) 11, you get the error shown below. Korean input does not work well.

korean-input-error

In Google Chrome it works fine, naturally (?).

normal-case

The Cause

element-ui is built primarily for Chinese-speaking users. The default language is even set to Chinese. Because of this, the form’s input box is also designed with Chinese input in mind first, and there is logic that waits until a single character being typed into the input box is fully composed. This is what malfunctions in IE.

The Solution

You can refer to this. Just delete all the code related to valueBeforeComposition. I recommend method 2.

1. Edit node_modules directly

You can fix this by modifying the files below in your project’s node_modules directory.

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

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

2. Modify the element-ui source, then build a distribution

After cloning the element-ui github repository, modify the /packages/input/src/input.vue file. Then run npm run dist and put the output into your project.

I have uploaded a version that fixes the problem above (based on v2.9.1) to my github repository. Clone either the master branch or the dev branch, go into that path in your console, run npm run dist, and then copy and paste the build output into the node_modules/element-ui folder of the project you’re working on.

If you want to modify the source directly, refer to the following links.

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

Other Notes

JiHyung Lee made a contribution that fixes the problem above, so I believe it will be resolved in the next version. The Korean input problem will probably only be fixed in version 3.0.

Of course, polyfills are essential. Refer to this post.

The end!

Leave a comment

You may also enjoy