Can't type in b-form-textarea

I’m trying to use textarea in my component, but I can’t type in text. Sometimes I was able to type one letter but nothing more. The same code but with b-form-input -works. I can type a text there but in textarea - can’t

I’m using textarea in tabs:

<b-tab v-for="(item, index) in newItem" :key="item.code" :title="item.name" :active="!index">
<!--Input works-->
    <b-form-input id="InfoInput"
          type="text"
          v-model="item.value.info">
     </b-form-input>

 <!--Text area does not work-->
    <b-form-textarea id="countryInfo"
          v-model="item.value.info"
          :rows="3">
     </b-form-textarea>
</b-tab>

OS: Ubuntu 16.4 Browser: Google Chrome Version of Bootstrap-Vue: 2.0.0-rc.2

[DavidRueter]

Proposed fix:

In bootstap-vue.js, in the section var bFormTextarea = ... change the following:

on: {
    input: function input(evt) {
        _this.localValue = evt.target.value;
    }
}

Replace with:

on: {
    input: function input(evt) {
        _this.$emit(input', evt.target.value);
        _this.$refs.input.value = evt.target.value;
    }
}

This seems to correct the problem.

Notes:

Nature of the problem is not not being able to type into the textarea because the value is immediately refreshed with the old value. (i.e. the control is not read-only, but flickers and overwrites what you type).

This fix is patterned after the way bFormInput is coded (see onInput() and setValue() methods of bFormInput).

Note that the input event fires on every keystroke.

Before the fix, inspecting evt.target.value shows that the evt.target.value does contain the correct value (i.e. the current value of the text area, including the latest typed character), but the setter on localValue looses the new character that was typed…specifically in vue.js at dep.notify(); in function reactiveSetter() … specifically in vue.js at Dep.prototype.notify = function notify ()...subs[i].update();

After the fix, the control behaves properly.

[soichih]

I am not sure why this work, but a workaround for me was to initialize the object specified in v-model (in this cacse “info”) through Vue.set(). I think the issue is something to do with the vue observability.