[Vuejs]-Vue 2 – button @click not working when input has :focus with height change

by

4👍

It is because click event hasn’t be finished since height changed when the button released.
How about try to replace click with mousedown? It’s not a radical solution but works in your case.
Code Snippet

<button type="button" @mousedown="clickADD">ADD</button>
👤choasia

1👍

What’s happening: on mousedown outside the textarea, it loses focus, causing the redraw to move the button before the mouseup completes the click. If you hold the mouse down instead of releasing, then move the mouse over the button, then release, you complete the click in the button and the click trigger fires. Unfortunately, that’s not a reasonable expectation of user behavior.

What you can do: control the appearance with a class, which you set on focus, and on blur, you wait until the mouse has left the Add button to remove:

<textarea v-model="msg2" id="wallpost" ref="ta" @focus="setActive" @blur="clearActive"></textarea>
<button type="button" @click="clickADD" @mouseenter="allowBlur(false)" @mouseleave="allowBlur(true)">ADD</button>

…

setActive(e) {
  e.target.classList.add('active');
},
clearActive() {
  if (this.blurAllowed) {
    this.$refs.ta.classList.remove('active');
  }
},
allowBlur(whether) {
  this.blurAllowed = whether;
  this.clearActive();
}

Updated fiddle

👤Roy J

Leave a comment