From 225b4304ae30ede1b24be87071981137c647f33a Mon Sep 17 00:00:00 2001
From: LouisMazel <me@loicmazuel.com>
Date: Fri, 15 Dec 2023 20:06:00 +0100
Subject: [PATCH] refactor(maz-ui): MazDropdown - use v-click-outside to close
 dropdown if trigger=click, useful for mobile

---
 packages/lib/components/MazDropdown.vue | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/packages/lib/components/MazDropdown.vue b/packages/lib/components/MazDropdown.vue
index 210f3ef47f..57cb43d8db 100644
--- a/packages/lib/components/MazDropdown.vue
+++ b/packages/lib/components/MazDropdown.vue
@@ -1,5 +1,11 @@
 <template>
-  <div :id="instanceId" class="m-dropdown" :style="style" :class="[props.class]">
+  <div
+    :id="instanceId"
+    v-click-outside="() => (dropdownOpen = false)"
+    class="m-dropdown"
+    :style="style"
+    :class="[props.class]"
+  >
     <div
       role="button"
       tabindex="0"
@@ -13,12 +19,12 @@
       @mouseenter="onElementMouseenter"
       @mouseleave="onElementMouseleave"
     >
-      <!--
-          @slot Custom Element
-            @binding {Boolen} is-open close function
-            @default `<MazBtn />`
-        -->
       <span class="maz-sr-only">{{ screenReaderDescription }}</span>
+      <!--
+        @slot Custom Element
+          @binding {Boolen} is-open close function
+          @default `<MazBtn />`
+      -->
       <slot name="element" :is-open="dropdownOpen">
         <MazBtn :color="color" :disabled="disabled" v-bind="$attrs" tabindex="-1">
           <span class="maz-flex maz-items-center maz-gap-2">
@@ -97,6 +103,7 @@
   import { useInstanceUniqId } from '../modules/composables/use-instance-uniq-id'
   import { type RouteLocationRaw } from 'vue-router'
   import { debounce } from '../modules/helpers/debounce'
+  import { vClickOutside } from '../modules/directives/click-outside'
   import { type Position } from './types'
   import { type Color } from './MazBtn.vue'