Double value appear in textarea when using render function to create in .vue file.

[Fuji-sunny]

Version

2.5.13

Reproduction link

https://jsfiddle.net/SunnyLyu/ntoboxev/

Steps to reproduce

1. sorry for things that it could not use .vue file definition in jsfiddle, please follow the steps below.

2. to create a textarea component like this:

   export default {
   props: {
   value: {
   type: String
   }
   },
   render: function(h) {
   var _this = this;
   return h('textarea', {
   'on': {
   'input': function(e){
   _this.$emit('update:value', e.target.value);
   }
   }
   })
   }
   };

3. import into a .vue file and use as a Vue component:

4. run all these codes

What is expected?

Type '1' in textarea once, a character '1' would appear in the textarea, in IE11.

What is actually happening?

Type '1' in textarea once, 2 characters '11' would appear in the textarea at the same time, in IE11.

---

1. Just use the component definition in HTML, everything goes well in both IE and Chrome (like the example running in jsfiddle).

2. Once when using the definition in .vue file, after compiled would get wrong in IE11, but still ok in Safari and Chrome.

[Fuji-sunny]

Is there any progress ?

[jkzing]

Hi @Fuji-sunny, I am not able to reproduce your issue under IE 11 with following code:

<script>
export default {
  props: {
    value: {
      type: String
    }
  },
  render(h) {
    return h('textarea', {
      on: {
        input: e => {
          this.$emit('update:value', e.target.value)
        }
      }
    })
  }
}
</script>

<style>

</style>

---

If you are still facing this issue, I suggest you open a github repro, and upload your problematic code, and give the repo address back to us.

[Fuji-sunny]

@jkzing
I am still facing this problem so I push the reproduction code in here:
https://github.com/Fuji-sunny/vuerepo

My ie version is 11.0.9600.18738, hope the reproduction would help.

[jkzing]

@Fuji-sunny just did some investigation on it and found you can get it work simply replace [this.value] with this.value

render(h) {
  return h('textarea', {
    on: {
      input: e => {
        this.$emit("update:value", e.target.value);
      }
    },
  }, this.value);
}

It's vue's patch mechanism which caused that, but the root cause is a different behavior in Chrome and IE11, see this fiddle: https://jsfiddle.net/9fshvom1/2/. I'm not sure if we need to do improvement on it or it's just a wontfix...😂

[Fuji-sunny]

@jkzing
Much thanks for your investigation !

In this scenario, I would like to use your solution.
Hope that this would not happen in other situation.

[Fuji-sunny]

@jkzing
Unfortunately here comes another problem.

Your solution works when adding text in the textarea, but when press backspace to omit text till no text in textarea, IE11 throws an error says something like "arguments invalid".

I've gone through into vue's code, when pass [this.value] to createElement, it won't cause this error. When pass this.value to createElement, it would go into setTextContent method. and node.wholeText is about this error.

Any other solutions or suggestions ?

ps. The same reproduction above: https://github.com/Fuji-sunny/vuerepo