Focus tag shortcut name upon tag shortcut creation

GeniJaho · Mar 25, 2024 · f669a86 · f669a86
1 parent bf36d35
commit f669a86
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 0 deletions.
diff --git a/resources/js/Pages/TagShortcuts/Index.vue b/resources/js/Pages/TagShortcuts/Index.vue
@@ -16,6 +16,7 @@ const props = defineProps({
     tags: Object,
 });
 
+const tagShortcutModal = ref(null);
 const showModal = ref(false);
 const search = ref('');
 const filteredTagShortcuts = computed(() => {
@@ -33,6 +34,7 @@ const openModal = (tagShortcut = null) => {
     tagShortcutState.value.setTagShortcut(tagShortcut);
     tagShortcutState.value.setTagShortcutName(tagShortcut);
     showModal.value = true;
+    tagShortcutModal.value.autofocusName();
 };
 
 const closeModal = () => {
@@ -121,6 +123,7 @@ provide('tags', readonly(props.tags));
             </div>
 
             <TagShortcutModal
+                ref="tagShortcutModal"
                 :show="showModal"
                 @close="closeModal"
             ></TagShortcutModal>

diff --git a/resources/js/Pages/TagShortcuts/Partials/TagShortcutModal.vue b/resources/js/Pages/TagShortcuts/Partials/TagShortcutModal.vue
@@ -24,6 +24,7 @@ const props = defineProps({
 const items = inject('items');
 const tags = inject('tags');
 const selectedItem = ref(null);
+const shortcutName = ref(null);
 
 const addItem = () => {
     axios.post(route('tag-shortcut-items.store', tagShortcutState.value.tagShortcut.id), {
@@ -45,6 +46,14 @@ const updateName = debounce(() => {
 const close = () => {
     emit('close');
 };
+
+defineExpose({
+    autofocusName: () => {
+        if (! tagShortcutState.value.tagShortcut) {
+            setTimeout(() => shortcutName.value?.focus(), 100)
+        }
+    }
+});
 </script>
 
 <template>
@@ -67,6 +76,7 @@ const close = () => {
                         <div class="w-full sm:w-96">
                             <TextInput
                                 id="shortcut"
+                                ref="shortcutName"
                                 v-model="tagShortcutState.shortcutName"
                                 @input="updateName"
                                 type="text"