focus input field on dialog open so that it can directly be closed again by pressing enterissue-6295

2 files changed, 12 insertions, 3 deletions

diff --git a/resources/vue/apps/short-urls/ShortUrl.vue b/resources/vue/apps/short-urls/ShortUrl.vue
index 953ae37..f2310f0 100644
--- a/resources/vue/apps/short-urls/ShortUrl.vue
+++ b/resources/vue/apps/short-urls/ShortUrl.vue
@@ -33,7 +33,7 @@
                 @input="validateAlias"
                 maxlength="255"
                 @keydown.enter="triggerSave"
-                v-autofocus
+                ref="linkAlias"
             />
         </LabelRequired>
 
@@ -54,7 +54,7 @@
 </template>
 
 <script setup>
-import {ref} from 'vue';
+import {ref, onMounted} from 'vue';
 import {$gettext} from "../../../assets/javascripts/lib/gettext";
 import StudipMessageBox from '../../components/StudipMessageBox';
 import LabelRequired from '../../components/forms/LabelRequired';
@@ -71,6 +71,7 @@ const props = defineProps({
 });
 const emit = defineEmits(['save']);
 const editing = ref(props.shortLink);
+const linkAlias = ref(null);
 
 function triggerSave() {
     emit('save', editing.value);
@@ -81,4 +82,8 @@ function validateAlias() {
     editing.value.attributes.alias = editing.value.attributes.alias.replace(pattern, '').slice(0, 256);
 }
 
+onMounted(() => {
+    linkAlias.value.focus();
+});
+
 </script>
diff --git a/resources/vue/apps/short-urls/ShortUrlLink.vue b/resources/vue/apps/short-urls/ShortUrlLink.vue
index dacf1fe..a3b972e 100644
--- a/resources/vue/apps/short-urls/ShortUrlLink.vue
+++ b/resources/vue/apps/short-urls/ShortUrlLink.vue
@@ -20,7 +20,11 @@
         @confirm="save"
     >
         <template #dialogContent>
-            <short-url :shortLink="newLink" :isInContext="isInContext"/>
+            <short-url
+                :shortLink="newLink"
+                :isInContext="isInContext"
+                @save="save"
+            />
         </template>
     </studip-dialog>
 </template>