Currently, I am developing an application in Vue 3 using Script Setup and Quasar. In this app, users can add new input boxes by simply clicking the "New Space +" button. However, it has become quite tedious to click the button repeatedly, so I am looking to implement a feature where pressing 'enter' will not only add a new space but also focus on that newly added space. Although the functionality for adding a new input box is working fine with both the button and the 'Enter' key, I am facing difficulties in targeting the newly added input element. The inputs function by adding an empty element to an array, making it challenging for me to focus on this specific new element.
https://i.sstatic.net/KIlLI.png
I have come across various solutions involving "this.$refs.input", but they all involve declaring refs (const input = ref(null)), which isn't feasible for me due to the dynamic nature of the input. Moreover, using "this" throws an error.
Although I referred to this source for guidance, it did not provide a solution for my issue.
HTML - Vue using Quasar
<div
class="col-3 q-pa-md q-gutter-sm"
v-for="(space, index) in selectedSpaces"
:key="index"
>
<div class="row">
<div class="col-9">
<q-input
v-model="selectedSpaces[index]"
v-on:keyup.enter="AddNewSpace()"
/>
</div>
<div class="col-2 q-pt-xs q-pl-sm">
<q-btn ..../>
</div>
</div>
</div>
//also tried
<q-input
v-model="selectedSpaces[index]"
v-on:keyup.enter="AddNewSpace($event)"
/>
Vue 3 using Script Setup
<script setup lang="ts">
const selectedSpaces = ref<string[]>([]);
const AddNewSpace = (): void => {
selectedSpaces.value.push('');
const index = selectedSpaces.value.length - 1;
//Here's where I'm struggling
selectedSpaces.value[index].focus();
};
//also tried
const AddNewSpace = ($event: any): void => {
selectedSpaces.value.push('');
$event.target.parentElement.nextElement.children[1].focus();
//AND
$event.target.parentElement.nextElementSibling .children[1].focus();
};
</script>
To reiterate, when a new space is added using the AddNewSpace() method, how can I also ensure that the focus is directed to that newly added space?