From 3afc0835d40fab0ecc3630c9317e0e127ecb03d0 Mon Sep 17 00:00:00 2001
From: Jojo Ortiz <ortiz.jroman@gmail.com>
Date: Tue, 21 Nov 2023 16:50:36 -0800
Subject: [PATCH] add funtionality to close dropdown after outside click

---
 .../lib/Chatbots/Components/Dropdown.svelte   |  9 ++++++++-
 pykoi/frontend/src/utils.js                   | 20 +++++++++++++++++++
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/pykoi/frontend/src/lib/Chatbots/Components/Dropdown.svelte b/pykoi/frontend/src/lib/Chatbots/Components/Dropdown.svelte
index a9dee91..1855c12 100644
--- a/pykoi/frontend/src/lib/Chatbots/Components/Dropdown.svelte
+++ b/pykoi/frontend/src/lib/Chatbots/Components/Dropdown.svelte
@@ -3,6 +3,7 @@
   import { checkedDocs } from "../../../store";
   import { selectAll } from "d3-selection";
   import { tooltip } from "../../../utils.js";
+  import { clickOutside } from "../../../utils.js";
 
   export let documents = [];
 
@@ -44,12 +45,18 @@
     return text;
   }
 
+  function handleClickOutside(e) {
+    e.preventDefault();
+    console.log('click outside');
+    expanded = false;
+  }
+
   $: console.log($checkedDocs);
 </script>
 
 <form>
   <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <div class="multiselect">
+  <div class="multiselect" use:clickOutside on:click_outside={handleClickOutside}>
     <div class="selectBox" on:click={toggleCheckboxes}>
       <select>
         <option>Documents</option>
diff --git a/pykoi/frontend/src/utils.js b/pykoi/frontend/src/utils.js
index cdbee22..702360d 100644
--- a/pykoi/frontend/src/utils.js
+++ b/pykoi/frontend/src/utils.js
@@ -101,3 +101,23 @@ export function tooltip(node, params) {
 		}
 	}
 }
+
+/** Dispatch event on click outside of node */
+export function clickOutside(node) {
+
+  const handleClick = event => {
+    if (node && !node.contains(event.target) && !event.defaultPrevented) {
+      node.dispatchEvent(
+        new CustomEvent('click_outside', node)
+      )
+    }
+  }
+
+    document.addEventListener('click', handleClick, true);
+
+  return {
+    destroy() {
+      document.removeEventListener('click', handleClick, true);
+    }
+    }
+}