'focus on textarea inside v-for issue

I have comments and replies .

when i click the reply button on the comment i want it to focus on the collapsed textarea .

there is many textareas since its a comment section ..

  <div class="bg-white border shadow-soft p-4 mb-4" v-for="comment in comments" :key="comment.id"

The reply button :

   <b-button class="text-action font-weight-light font-small" v-b-toggle="'collapse-'+comment.id" @click="focusTextArea('replay'+comment.id)">
                    <i class="fas fa-reply mr-2"></i> رد</b-button>

textarea : 

   <b-collapse :id="'collapse-'+comment.id">
     <textarea class="form-control " v-model="reply"  placeholder="Reply to John Doe" rows="6"  :ref="'replay'+comment.id"></textarea>
    <div class="d-flex justify-content-between mt-3"><small class="font-weight-light"><span >1000</span> characters remaining</small>
<button class="btn btn-primary btn-sm animate-up-2" type="button" @click="replyTo(comment)">send</button>
   </div>
    </b-collapse>

I have tried this :

   focusTextArea(textarea) {
                this.$nextTick(() => {
                    this.$refs[textarea][0].focus();
                });
            },

and on click on the button above ^.

when i click the button nothing happens but when i click the button back the textarea gets collapsed and the focus appears while its collapsing :\

Any idea whats wrong here?

javascripthtmlcssvue.jsvuejs2


Solution 1:[1]

i have created a codepen for this.

Your approach is right so far, but keep in mind that the collapse element has an animation which you should wait for before triggering the focus().

https://codepen.io/elsib/pen/GROEVRe

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 demhadesigns

Related Questions