fix: dropdown hover mobilenative oruga-ui#609

mlmoravek · Oct 5, 2023 · f24ef70 · f24ef70
1 parent e0e5392
commit f24ef70
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 9 deletions.
diff --git a/packages/docs-next/.vitepress/theme/examples/dropdown/multiple.vue b/packages/docs-next/.vitepress/theme/examples/dropdown/multiple.vue
@@ -7,7 +7,7 @@ const selectedOptions = ref([]);
 <template>
     <section>
         <p class="content"><b>selected</b>: {{ selectedOptions }}</p>
-        <o-dropdown v-model="selectedOptions" multiple aria-role="list">
+        <o-dropdown v-model="selectedOptions" multiple>
             <template #trigger>
                 <o-button
                     variant="primary"

diff --git a/packages/oruga-next/src/components/dropdown/Dropdown.vue b/packages/oruga-next/src/components/dropdown/Dropdown.vue
@@ -25,6 +25,7 @@ import {
     removeElement,
     createAbsoluteElement,
     toCssDimension,
+    isMobileAgent,
 } from "@/utils/helpers";
 import { isClient } from "@/utils/ssr";
 import { provideDropdown } from "./useDropdownShare";
@@ -190,6 +191,7 @@ const vmodel = useVModelBinding<[string, number, boolean, object, Array<any>]>(
     props,
     emits,
 ) as Ref<any>;
+
 const isActive = ref(props.active);
 
 /** toggle isActive value when prop is changed */
@@ -209,8 +211,6 @@ watch(isActive, (value) => {
     if (props.appendToBody) nextTick(() => updateAppendToBody());
 });
 
-const isHovered = ref(false);
-
 const { isMobile } = useMatchMedia();
 
 if (isClient) {
@@ -232,8 +232,12 @@ onUnmounted(() => {
     }
 });
 
+// check if mobile modal should be shown
 const isMobileModal = computed(() => props.mobileModal && !props.inline);
 
+// check if client is mobile native
+const isMobileNative = computed(() => props.mobileModal && isMobileAgent.any());
+
 const cancelOptions = computed(() =>
     typeof props.canClose === "boolean"
         ? props.canClose
@@ -338,29 +342,31 @@ function keyPress(event: KeyboardEvent): void {
 }
 
 function onClick(): void {
-    if (props.triggers.indexOf("click") >= 0) toggle();
+    if (props.triggers.indexOf("click") >= 0 || isMobileNative.value) toggle();
 }
 function onContextMenu(event: MouseEvent): void {
     if (props.triggers.indexOf("contextmenu") >= 0) {
         event.preventDefault();
         toggle();
     }
 }
+function onFocus(): void {
+    if (props.triggers.indexOf("focus") >= 0) toggle();
+}
+
+const isHovered = ref(false);
 function onHover(): void {
-    if (props.triggers.indexOf("hover") >= 0) {
+    if (!isMobileNative.value && props.triggers.indexOf("hover") >= 0) {
         isHovered.value = true;
         toggle();
     }
 }
 function onHoverLeave(): void {
-    if (isHovered.value) {
+    if (!isMobileNative.value && isHovered.value) {
         toggle();
         isHovered.value = false;
     }
 }
-function onFocus(): void {
-    if (props.triggers.indexOf("focus") >= 0) toggle();
-}
 
 /** Toggle dropdown if it's not disabled. */
 function toggle(): void {