Whenever I click a button, the modal pops up on the screen. Inside the modal, there is an input field that I want to automatically set focus to when the modal appears after clicking the button.
This is the button that triggers the modal popup:
<div
class="manu-bar-card"
@click="
() => {
groupHandler.addNewgroupModal = true;
newGroupName.focus();
}"
>
This is my modal (it will display if groupHandler.addNewgroupModal is set to true):
<div class="modal-container" v-if="groupHandler.addNewgroupModal">
<input
ref="newGroupName"
type="text"
/>
</div>
The input field inside the modal has a reference attribute assigned to it:
<input
ref="newGroupName"
type="text"
/>
I have defined this reference inside my <script setup>, along with a reactive object to control the visibility of the modal:
const newGroupName = ref();
const groupHandler = reactive({
addNewgroupModal: false,
});
If anybody can suggest how to handle the issue of focusing on the input field before the modal is fully mounted, I would greatly appreciate it. Thank you!