From f3b2c8fb6f99869e2ff11627c49f26ca1e7f6912 Mon Sep 17 00:00:00 2001
From: Jonathan Reinink <jonathan@reinink.ca>
Date: Wed, 18 Dec 2019 15:12:22 -0500
Subject: [PATCH] Improve dropdown (add auto closing)

---
 resources/js/Shared/Dropdown.vue     | 20 ++++++++------------
 resources/js/Shared/SearchFilter.vue |  2 +-
 2 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/resources/js/Shared/Dropdown.vue b/resources/js/Shared/Dropdown.vue
index 48f0385..8abaed0 100644
--- a/resources/js/Shared/Dropdown.vue
+++ b/resources/js/Shared/Dropdown.vue
@@ -1,10 +1,10 @@
 <template>
-  <button type="button" @click="toggle">
+  <button type="button" @click="show = true">
     <slot />
     <portal v-if="show" to="dropdown">
       <div>
-        <div style="position: fixed; top: 0; right: 0; left: 0; bottom: 0; z-index: 99998; background: black; opacity: .2" @click="toggle" />
-        <div ref="dropdown" style="position: absolute; z-index: 99999;" @click.stop>
+        <div style="position: fixed; top: 0; right: 0; left: 0; bottom: 0; z-index: 99998; background: black; opacity: .2" @click="show = false" />
+        <div ref="dropdown" style="position: absolute; z-index: 99999;" @click.stop="show = autoClose ? false : true">
           <slot name="dropdown" />
         </div>
       </div>
@@ -25,6 +25,10 @@ export default {
       type: String,
       default: 'scrollParent',
     },
+    autoClose: {
+      type: Boolean,
+      default: true,
+    },
   },
   data() {
     return {
@@ -50,17 +54,9 @@ export default {
   mounted() {
     document.addEventListener('keydown', (e) => {
       if (e.keyCode === 27) {
-        this.close()
+        this.show = false
       }
     })
   },
-  methods: {
-    close() {
-      this.show = false
-    },
-    toggle() {
-      this.show = !this.show
-    },
-  },
 }
 </script>
diff --git a/resources/js/Shared/SearchFilter.vue b/resources/js/Shared/SearchFilter.vue
index 41b703f..6ce26f3 100644
--- a/resources/js/Shared/SearchFilter.vue
+++ b/resources/js/Shared/SearchFilter.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex items-center">
     <div class="flex w-full bg-white shadow rounded">
-      <dropdown class="px-4 md:px-6 rounded-l border-r hover:bg-grey-lightest focus:border-white focus:shadow-outline focus:z-10" placement="bottom-start">
+      <dropdown :auto-close="false" class="px-4 md:px-6 rounded-l border-r hover:bg-grey-lightest focus:border-white focus:shadow-outline focus:z-10" placement="bottom-start">
         <div class="flex items-baseline">
           <span class="text-grey-darkest hidden md:inline">Filter</span>
           <svg class="w-2 h-2 fill-grey-darker md:ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 961.243 599.998">