I have this weird seemingly reactivity related bug, but it's not reactivity related as far as I can tell.

I'm using a render function to render a textarea.

console.log('The value...', self.value);
return createElement("textarea", {
  ...commonAttributes,
}, (self.value));

This works up to all the way into the inspector dom. For example, when I set the binding value of the textarea to "abc", the console(self.value) will successfully show "abc", and even the inspector will show "abc" as innertext

<textarea data-v-c477da9c="" class="TextInput TextInput--multiline TextInput--full-width" data-v-513a62da="">abc</textarea>

However, the "visible" text area is still at the last "user inputted" value. When I start typing the inner value is reset to what is seen in the visible DOM element.

enter image description here

1 Answers

2
Decade Moon On Best Solutions

The inner text of a <textarea> element designates the default value only; modifying it won't update the textarea's value. When Vue patches the DOM after a re-render it'll reuse the existing textarea element and change its inner text, since that's what you're changing.

You need to set the textarea's value through the value prop and handle the input event to update the component's data.

new Vue({
  el: '#app',
  data: {
    text: 'Hello',
  },
  render(h) {
    return h('div', [
      h('pre', [this.text]),
      h('textarea', {
        domProps: {
          value: this.text
        },
        on: {
          input: e => this.text = e.target.value
        }
      })
    ])
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app"></div>