Keep focus on textarea after button click

user_947668 0
Viewed 1057

Please advice how to keep focus on textarea element after clicking specific button. For my mobile app I use Quasar vue based framework.

Tried to apply preventDefault

<q-btn @click.prevent="handleClick" label="click me" />

and stopPropagation

 <q-btn @click.stop="handleClick" label="click me" />

But in any case textarea losses the focus after button click.

Codepen: https://codepen.io/olegef/pen/NWNvxJM

UPD: workaround with forced focus causes side effects on mobile like blinking embedded keyboard. That is why I'm looking for option with permanent focus.

UPD2: it works just fine if I use simple div as a button and mousedown event instead of click

quasar-framework vue.js javascript
2 Answers

As Mr. Polywhirl mentioned in the comments, that's because after click, the button has the focus. One way to return the focus to the input is like this:

Add ref attribute to your input:

ref="myInput"

So your input becomes:

<q-input
  ref="myInput"
  v-model="text"
  filled
  type="textarea"
>
</q-input>

Then in the handleClick method add this line:

this.$refs.myInput.focus();
user_25684690

The question author left the update "it works just fine if I use simple div as a button and mousedown event instead of click". In fact, the desired effect can be achieved using a button element. Here the mousedown event is prevented, to stop focus being lost from the text area, while the click handler is invoked as normal:

<q-btn @mousedown.prevent @click="handleClick" label="click me"></q-btn>

This can be seen in this forked codepen. (The second button has the above fix.)

user_6040060
Related