I have a question regarding comments and replies.
Whenever I click the reply button on a comment, I want it to automatically focus on the collapsed textarea for that specific comment.
Since there are multiple textareas in the comment section...
<div class="bg-white border shadow-soft p-4 mb-4" v-for="comment in comments" :key="comment.id"
The reply button looks like this:
<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> Reply</b-button>
The corresponding textarea is displayed below:
<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>
In attempting to make the textarea focus when clicking the button, I have used this code:
focusTextArea(textarea) {
this.$nextTick(() => {
this.$refs[textarea][0].focus();
});
},
However, upon clicking the button, nothing happens. Instead, if I click the button again, the textarea collapses and the focus appears right as it is collapsing. Any ideas on what the issue might be?