IE10/11: v-model + placeholder = fail

[fullfs]

Hey!
Seem to be a problem with those inputs with v-model and placeholder attribute in IE10/11
They begin to rapidly exchange focus with each other endlessly.
http://jsfiddle.net/4ty2v4fc/44/
Can you see the problem in my example?

[jails]

Looks like it's related to https://github.com/yyx990803/vue/issues/558 and had already been solved.

[yyx990803]

Yeah, it's fixed in latest commit on dev.

[fullfs]

In this one it should be fixed, right?
https://github.com/yyx990803/vue/blob/dev/dist/vue.min.js

Tested it, the problem still occurs

[yyx990803]

Nah, I don't check in build files in the dev branch. You'll have to build it yourself.

[fullfs]

Well, I've built it. Still focus blinking hell :)

[fullfs]

Amendment: it's still blinking in complex form. In the fiddle the blinking is no more.
Will dig in a little more.
Thanks for response :)

[fullfs]

Oh, I've got it. The problems occurs only with placeholders in cyrillic (russian) symbols (maybe some others non-latin symbols too).
So here we go like this:
http://jsfiddle.net/4ty2v4fc/49/

[fullfs]

Looks like there is a bug with input event in ie10/11 with placeholders in cyrillic.
It false-fires in some conditions.
For example, sometimes it fires on page load even if input was not focused
It also fires even if input was just focused without any value changes (probably, because placeholder's fading), but this one is true for both cyrillic and latin symbols.

Overall textInputListener function (in src/directives/model/default.js) begins to repeat circular and then begins to change cursor's position and maybe there is some bug too.
If I remove following code:

      _.nextTick(function () {
        var newVal = self._watcher.value
        self.update(newVal)
        if (charsOffset != null) {
          var cursorPos =
            _.toString(newVal).length - charsOffset
          el.setSelectionRange(cursorPos, cursorPos)
        }
      })

The focus blinking won't occur.

[yyx990803]

Hmm... this is kinda out of my control since it's more like an IE bug - most likely it's mistakingly firing input events when el.setSelectionRange() is called, even though the value didn't change at all... if you are not using filters on these input elements, you can safely remove the code you mentioned and use a custom build.

[fullfs]

Sadly I do use filters on those inputs.
Will try to come with a solution by myself, thanks :)

[fullfs]

Good news, looks like I've fixed it!
Just added:

if (charsOffset < 0) {
    return
}

after

} catch (e) {}

In IE10 when focus-outing an input with a cyrilic placeholder the browser returns funny numbers:

el.value.length // will return 0
el.selectionStart // will return 4 (if the placeholder is 4 symbols long, for example)

So on the case I just interrupt the handler and everything works fine :)

Didn't do much testing, so maybe I've missed something.

[yyx990803]

Awesome! Thanks for finding the solution for it :)