Fixed multiple Dialog display issue when mouse and keyboard navigatio…

src/App.vue

@@ -2,7 +2,7 @@
 import { computed, defineAsyncComponent, inject, nextTick, onMounted, ref, watch } from 'vue'
 import { useMagicKeys } from '@vueuse/core'
 import Logo from '@/icons/Logo.vue'
 import Ripple from '@/components/Ripple.vue'
 import AppComponentLoader from '@/components/AppComponentLoader.vue'
 import type { Package } from '@/entity/Dependency'
 import { dependencyStore as dStore } from '@/stores/dependency'
@@ -70,6 +70,7 @@
 const focusTrapInputElement = ref<HTMLInputElement | null>(null)
 const exploreButton = ref<InstanceType<typeof BaseButton> | null>(null)
 const shareButton = ref<InstanceType<typeof BaseButton> | null>(null)
+const generateButton = ref<InstanceType<typeof BaseButton> | null>(null)
 //const selectedPackages = ref<Set<string>>(new Set<string>())
 const projectMetadata = ref<
     Map<
@@ -201,7 +202,7 @@
 
 watch(metaB, (v) => {
     if (v && !isAnyDialogShown.value) {
-        showDependenciesDialog.value = true
+        displayDependencyDialog()
     }
 })
 
@@ -218,8 +219,8 @@
 })
 
 watch(ctrlB, (v) => {
-    if (v && !isMac) {
-        showDependenciesDialog.value = true
+    if (v && !isMac && !isAnyDialogShown.value) {
+        displayDependencyDialog()
     }
 })
 
@@ -265,6 +266,10 @@
     }
 }
 async function onGenerate() {
+    addDependencyButton.value?.blur()
+    shareButton.value?.blur()
+    exploreButton.value?.blur()
+
     validateSelectedProject()
     await nextTick()
     if (projectMetadata.value.has(projectType.value) && haveValidProjectMetaData()) {
@@ -291,6 +296,9 @@
     showShareDialog.value = true
 }
 async function onExplore() {
+    addDependencyButton.value?.blur()
+    shareButton.value?.blur()
+    generateButton.value?.blur()
     validateSelectedProject()
     await nextTick()
     if (!haveValidProjectMetaData()) {
@@ -335,21 +343,37 @@
 })
 
 function displayDependencyDialog() {
+    exploreButton.value?.blur()
+    shareButton.value?.blur()
+    generateButton.value?.blur()
+
     showDependenciesDialog.value = true
     focusTrapInputElement.value?.focus()
 }
 
 function onCloseDependencyDialog() {
+    exploreButton.value?.blur()
+    shareButton.value?.blur()
+    generateButton.value?.blur()
+
     showDependenciesDialog.value = false
     addDependencyButton.value?.focus()
 }
 
 function onCloseExplorerDialog() {
+    addDependencyButton.value?.blur()
+    shareButton.value?.blur()
+    generateButton.value?.blur()
+
     showExplorer.value = false
     exploreButton.value?.focus()
 }
 
 function onCloseShareDialog() {
+    addDependencyButton.value?.blur()
+    exploreButton.value?.blur()
+    generateButton.value?.blur()
+
     showShareDialog.value = false
     shareButton.value?.focus()
 }
@@ -543,7 +567,7 @@
         <div
             class="h-16 flex relative flex-1 z-0 bg-white items-center justify-center space-x-4 border-t dark:border-gray-900 dark:bg-primary-dark-700"
         >
-            <BaseButton :primary="true" :enabled="haveValidProjectMetaData()" @click="onGenerate">
+            <BaseButton ref="generateButton" :primary="true" :enabled="haveValidProjectMetaData()" @click="onGenerate">
                 <span class="block">{{ generateButtonLabel }}</span>
                 <template #shortcut>
                     <span class="ml-2 font-extralight hidden md:block" v-if="!isMobile && isMac">⌘ + ⏎</span>

src/components/BaseButton.vue

@@ -15,8 +15,13 @@ function focus() {
     root.value?.focus()
 }
 
+function blur() {
+    root.value?.blur()
+}
+
 defineExpose({
-    focus
+    focus,
+    blur
 })
 </script>
 
@@ -35,16 +40,14 @@ defineExpose({
         class="relative flex focus:ring-1 dark:ring-primary-dark-900 items-center overflow-hidden rounded border px-4 py-2 transition duration-200 ease-linear"
     >
         <Ripple></Ripple>
-        <slot name="default" class="block"></slot>
+        <slot name="default"></slot>
         <slot name="shortcut"></slot>
     </button>
     <button
         v-else
         type="button"
         class="relative flex cursor-not-allowed items-center overflow-hidden rounded border border-gray-600 bg-gray-500 px-4 py-2 text-white"
     >
-        <span class="block">
-            <slot name="default"></slot>
-        </span>
+        <slot name="default"></slot>
     </button>
 </template>

src/components/ShareDialog.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import Dialog from '@/components/Dialog.vue'
 import { ref, inject, computed } from 'vue'
-import Ripple from '@/components/Ripple.vue'
 import { copyToClipboard as copyString, encode } from '@/util/Util'
 import type { SpringProject as SpringProjectType } from '@/entity/SpringProject'
 import type { VueJsProject as VueJsProjectType } from '@/entity/VueJsProject'