TextArea not working with Vuetify <v-textarea>

[sirsquall]

Hi,

I'm using the handleAt function to do a call to retrieve the suggestion, this is working well because I have the mention appearing, but I don't know why, when I hit "enter" or if I click on the suggestion nothing occur, and I have this error in the console:

this is my code: <at-ta :hover-select="false" v-model="message" :members="members" @at="handleAt"> <v-textarea :placeholder="placeholder" :error=!!errors.message :error-messages=errors.message ></v-textarea> </at-ta>

I tried the version 2.4 and the version and same result, the data is not updated in the text area.

Thank you, Alcindo

[sirsquall]

I found the issue, in the textarea we need to bind the value like that: <at-ta :hover-select="false" v-model="message" :members="members" @at="handleAt"> <v-textarea :value="message" :placeholder="placeholder" :error=!!errors.message :error-messages=errors.message ></v-textarea> </at-ta>

But now I have one remaining issue, if someone can help me, is the keydown enter didn't work.

[fritx]

@sirsquall hi, what's the <v-textarea> like? Seems the first issue is error in handleAt handler

[sirsquall]

Hi,

the v-textarea come from vuetify the material design framework, when I paste the raw html instead of the component the "keydown enter" works.

I still have the errors messages, here you can find the code of my method handleAt: async handleAt (chunk) { this.members = await this.$api.suggest.user({ 'user': chunk, 'limit': 5 }).then(response => { var cleanName = [] response.data.forEach(function (user) { cleanName.push(user.name) }) return cleanName }) },

and this is the results: ["yolo"] 0: "yolo" length: 1 __ob__: Observer dep: Dep {id: 2781, subs: Array(0)} value: ["yolo", __ob__: Observer] vmCount: 0 __proto__: Object __proto__: Array

[shivametikala]

confirmed that this doens't work with vuetify text-area (v-textarea) component !! i had to replace vuetify component with normal textarea and it started working again.

[fritx]

Oooh, Vuetify has been doing lots of magic in a VTextFIeld.

It's found hard to hack through.

on: Object.assign(listeners, {
  blur: this.onBlur,
  input: this.onInput,
  focus: this.onFocus,
  keydown: this.onKeyDown
}),
ref: 'input'

https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VTextField/VTextField.js#L332-L338

[fritx]

@sirsquall @shiva298 the PR was created, but seems in my machine the click now has some problem while the keydown works well.

[shivametikala]

@fritx : In my case, i was able to make it work in mouse click event but not on "Enterkeydown" event, The reason why keydown enter doest work on text-area is because vuetify does e.stopPropagation() at here : https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VTextarea/VTextarea.js#L103

[fritx]

@shiva298 well it's ok now, will release later.

Forgot to append this.dispatchInput() in PR right here: At.vue and AtTextarea.vue

This will fix the clicking problem and with @keydown.capture fixing the keydown problem.

[fritx]

@sirsquall @shiva298 2.5.0-alpha.2 has been released, try it with vertify plz

npm i -S vue-at@latest

Related commits can be tracked by branch here: https://github.com/fritx/vue-at/commits/fix/issue-89-vuetify-textarea

[fritx]

https://github.com/fritx/vue-at#vuetify-v-textarea