From 9b8784dc4a0e57772f27c59abd73829a10aa7e35 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Sun, 25 Jun 2023 13:57:44 +0800
Subject: [PATCH] fix: dropdown options cannot be clicked in some mobile
 devices

Signed-off-by: Ryan Wang <i@ryanc.cc>
---
 .../src/components/dropdown/Dropdown.vue        | 17 +++++++++++++++++
 .../src/components/dropdown/DropdownItem.vue    | 16 ++++++++++++++--
 .../components/src/components/dropdown/index.ts |  1 +
 .../src/components/dropdown/symbols.ts          |  5 +++++
 .../CategoryDropdownSelector.vue                |  7 +++++--
 .../dropdown-selector/TagDropdownSelector.vue   |  7 +++++--
 .../dropdown-selector/UserDropdownSelector.vue  |  7 +++++--
 .../components/AttachmentGroupList.vue          |  7 +------
 .../components/components/ThemeListItem.vue     | 12 ++----------
 .../plugins/components/PluginListItem.vue       |  8 ++------
 10 files changed, 57 insertions(+), 30 deletions(-)
 create mode 100644 console/packages/components/src/components/dropdown/symbols.ts

diff --git a/console/packages/components/src/components/dropdown/Dropdown.vue b/console/packages/components/src/components/dropdown/Dropdown.vue
index b9b9693ef8..7d498118da 100644
--- a/console/packages/components/src/components/dropdown/Dropdown.vue
+++ b/console/packages/components/src/components/dropdown/Dropdown.vue
@@ -1,6 +1,8 @@
 <script lang="ts" setup>
 import { Dropdown as FloatingDropdown, type Placement } from "floating-vue";
 import "floating-vue/dist/style.css";
+import { provide, ref } from "vue";
+import { DropdownContextInjectionKey } from "./symbols";
 
 withDefaults(
   defineProps<{
@@ -15,13 +17,28 @@ withDefaults(
   }
 );
 
+const dropdownRef = ref();
+
+function hide() {
+  dropdownRef.value?.hide();
+}
+
+provide(DropdownContextInjectionKey, {
+  hide,
+});
+
 const emit = defineEmits<{
   (event: "show"): void;
 }>();
+
+defineExpose({
+  hide,
+});
 </script>
 
 <template>
   <FloatingDropdown
+    ref="dropdownRef"
     :placement="placement"
     :triggers="triggers"
     @show="emit('show')"
diff --git a/console/packages/components/src/components/dropdown/DropdownItem.vue b/console/packages/components/src/components/dropdown/DropdownItem.vue
index 774299fbb1..6e3403e5cd 100644
--- a/console/packages/components/src/components/dropdown/DropdownItem.vue
+++ b/console/packages/components/src/components/dropdown/DropdownItem.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { VClosePopper } from "floating-vue";
+import { DropdownContextInjectionKey } from "./symbols";
+import { inject } from "vue";
 
 withDefaults(
   defineProps<{
@@ -11,15 +12,26 @@ withDefaults(
     type: "default",
   }
 );
+
+const emit = defineEmits<{
+  (event: "click", e: MouseEvent): void;
+}>();
+
+const { hide } = inject(DropdownContextInjectionKey) || {};
+
+function onClick(e: MouseEvent) {
+  hide?.();
+  emit("click", e);
+}
 </script>
 
 <template>
   <div
-    v-close-popper
     class="dropdown-item-wrapper"
     :class="[`dropdown-item-wrapper--${type}${selected ? '--selected' : ''}`]"
     role="menuitem"
     tabindex="-1"
+    @click="onClick"
   >
     <div class="flex items-center gap-3">
       <slot name="prefix-icon" />
diff --git a/console/packages/components/src/components/dropdown/index.ts b/console/packages/components/src/components/dropdown/index.ts
index 65c67561f9..9b8930d8b7 100644
--- a/console/packages/components/src/components/dropdown/index.ts
+++ b/console/packages/components/src/components/dropdown/index.ts
@@ -2,3 +2,4 @@ export { default as VDropdown } from "./Dropdown.vue";
 export { default as VDropdownItem } from "./DropdownItem.vue";
 export { default as VDropdownDivider } from "./DropdownDivider.vue";
 export { VClosePopper } from "floating-vue";
+export * from "./symbols";
diff --git a/console/packages/components/src/components/dropdown/symbols.ts b/console/packages/components/src/components/dropdown/symbols.ts
new file mode 100644
index 0000000000..bcd77eefea
--- /dev/null
+++ b/console/packages/components/src/components/dropdown/symbols.ts
@@ -0,0 +1,5 @@
+import type { InjectionKey } from "vue";
+
+export const DropdownContextInjectionKey: InjectionKey<{
+  hide: () => void;
+}> = Symbol("dropdown-context");
diff --git a/console/src/components/dropdown-selector/CategoryDropdownSelector.vue b/console/src/components/dropdown-selector/CategoryDropdownSelector.vue
index 5d331d509e..c33bc9fa16 100644
--- a/console/src/components/dropdown-selector/CategoryDropdownSelector.vue
+++ b/console/src/components/dropdown-selector/CategoryDropdownSelector.vue
@@ -22,6 +22,8 @@ const emit = defineEmits<{
 
 const { categories } = usePostCategory();
 
+const dropdown = ref();
+
 const handleSelect = (category: Category) => {
   if (
     props.selected &&
@@ -34,6 +36,8 @@ const handleSelect = (category: Category) => {
 
   emit("update:selected", category);
   emit("select", category);
+
+  dropdown.value.hide();
 };
 
 function onDropdownShow() {
@@ -71,7 +75,7 @@ const searchResults = computed(() => {
 </script>
 
 <template>
-  <VDropdown :classes="['!p-0']" @show="onDropdownShow">
+  <VDropdown ref="dropdown" :classes="['!p-0']" @show="onDropdownShow">
     <slot />
     <template #popper>
       <div class="h-96 w-80">
@@ -91,7 +95,6 @@ const searchResults = computed(() => {
             <li
               v-for="(category, index) in searchResults"
               :key="index"
-              v-close-popper
               @click="handleSelect(category)"
             >
               <VEntity
diff --git a/console/src/components/dropdown-selector/TagDropdownSelector.vue b/console/src/components/dropdown-selector/TagDropdownSelector.vue
index c018ba150a..93f932bdc1 100644
--- a/console/src/components/dropdown-selector/TagDropdownSelector.vue
+++ b/console/src/components/dropdown-selector/TagDropdownSelector.vue
@@ -23,6 +23,8 @@ const emit = defineEmits<{
 
 const { tags } = usePostTag();
 
+const dropdown = ref();
+
 const handleSelect = (tag: Tag) => {
   if (props.selected && tag.metadata.name === props.selected.metadata.name) {
     emit("update:selected", undefined);
@@ -32,6 +34,8 @@ const handleSelect = (tag: Tag) => {
 
   emit("update:selected", tag);
   emit("select", tag);
+
+  dropdown.value.hide();
 };
 
 function onDropdownShow() {
@@ -69,7 +73,7 @@ const searchResults = computed(() => {
 </script>
 
 <template>
-  <VDropdown :classes="['!p-0']" @show="onDropdownShow">
+  <VDropdown ref="dropdown" :classes="['!p-0']" @show="onDropdownShow">
     <slot />
     <template #popper>
       <div class="h-96 w-80">
@@ -89,7 +93,6 @@ const searchResults = computed(() => {
             <li
               v-for="(tag, index) in searchResults"
               :key="index"
-              v-close-popper
               @click="handleSelect(tag)"
             >
               <VEntity
diff --git a/console/src/components/dropdown-selector/UserDropdownSelector.vue b/console/src/components/dropdown-selector/UserDropdownSelector.vue
index 65c172f702..a6ac668bba 100644
--- a/console/src/components/dropdown-selector/UserDropdownSelector.vue
+++ b/console/src/components/dropdown-selector/UserDropdownSelector.vue
@@ -27,6 +27,8 @@ const emit = defineEmits<{
 
 const { users, handleFetchUsers } = useUserFetch();
 
+const dropdown = ref();
+
 const handleSelect = (user: User) => {
   if (props.selected && user.metadata.name === props.selected.metadata.name) {
     emit("update:selected", undefined);
@@ -36,6 +38,8 @@ const handleSelect = (user: User) => {
 
   emit("update:selected", user);
   emit("select", user);
+
+  dropdown.value.hide();
 };
 
 function onDropdownShow() {
@@ -71,7 +75,7 @@ const searchResults = computed(() => {
 </script>
 
 <template>
-  <VDropdown :classes="['!p-0']" @show="onDropdownShow">
+  <VDropdown ref="dropdown" :classes="['!p-0']" @show="onDropdownShow">
     <slot />
     <template #popper>
       <div class="h-96 w-80">
@@ -91,7 +95,6 @@ const searchResults = computed(() => {
             <li
               v-for="(user, index) in searchResults"
               :key="index"
-              v-close-popper
               @click="handleSelect(user)"
             >
               <VEntity
diff --git a/console/src/modules/contents/attachments/components/AttachmentGroupList.vue b/console/src/modules/contents/attachments/components/AttachmentGroupList.vue
index 0a4c1430f6..ace014c8f9 100644
--- a/console/src/modules/contents/attachments/components/AttachmentGroupList.vue
+++ b/console/src/modules/contents/attachments/components/AttachmentGroupList.vue
@@ -266,15 +266,10 @@ onMounted(async () => {
               {{ $t("core.common.buttons.delete") }}
             </VDropdownItem>
             <template #popper>
-              <VDropdownItem
-                v-close-popper.all
-                type="danger"
-                @click="handleDelete(group)"
-              >
+              <VDropdownItem type="danger" @click="handleDelete(group)">
                 {{ $t("core.attachment.group_list.operations.delete.button") }}
               </VDropdownItem>
               <VDropdownItem
-                v-close-popper.all
                 type="danger"
                 @click="handleDeleteWithAttachments(group)"
               >
diff --git a/console/src/modules/interface/themes/components/components/ThemeListItem.vue b/console/src/modules/interface/themes/components/components/ThemeListItem.vue
index 2bda5605b7..f4184c060a 100644
--- a/console/src/modules/interface/themes/components/components/ThemeListItem.vue
+++ b/console/src/modules/interface/themes/components/components/ThemeListItem.vue
@@ -208,18 +208,10 @@ const handleUninstall = async (theme: Theme, deleteExtensions?: boolean) => {
           {{ $t("core.common.buttons.uninstall") }}
         </VDropdownItem>
         <template #popper>
-          <VDropdownItem
-            v-close-popper.all
-            type="danger"
-            @click="handleUninstall(theme)"
-          >
+          <VDropdownItem type="danger" @click="handleUninstall(theme)">
             {{ $t("core.common.buttons.uninstall") }}
           </VDropdownItem>
-          <VDropdownItem
-            v-close-popper.all
-            type="danger"
-            @click="handleUninstall(theme, true)"
-          >
+          <VDropdownItem type="danger" @click="handleUninstall(theme, true)">
             {{ $t("core.theme.operations.uninstall_and_delete_config.button") }}
           </VDropdownItem>
         </template>
diff --git a/console/src/modules/system/plugins/components/PluginListItem.vue b/console/src/modules/system/plugins/components/PluginListItem.vue
index 6dbac47d29..a0a126cf6e 100644
--- a/console/src/modules/system/plugins/components/PluginListItem.vue
+++ b/console/src/modules/system/plugins/components/PluginListItem.vue
@@ -154,14 +154,10 @@ const handleResetSettingConfig = async () => {
           {{ $t("core.common.buttons.uninstall") }}
         </VDropdownItem>
         <template #popper>
-          <VDropdownItem v-close-popper.all type="danger" @click="uninstall">
+          <VDropdownItem type="danger" @click="uninstall">
             {{ $t("core.common.buttons.uninstall") }}
           </VDropdownItem>
-          <VDropdownItem
-            v-close-popper.all
-            type="danger"
-            @click="uninstall(true)"
-          >
+          <VDropdownItem type="danger" @click="uninstall(true)">
             {{ $t("core.plugin.list.actions.uninstall_and_delete_config") }}
           </VDropdownItem>
         </template>