From 6bd7b87c8c41af830cb92b3f5ea8c3fa4784e619 Mon Sep 17 00:00:00 2001
From: Dan <39170265+chillenberger@users.noreply.github.com>
Date: Tue, 16 Jul 2024 12:59:25 -0600
Subject: [PATCH] hide search dropdown on click out

---
 pgml-dashboard/src/components/dropdown/mod.rs              | 2 +-
 .../inputs/text/search/search/search_controller.js         | 7 +++++++
 .../src/components/inputs/text/search/search/template.html | 6 ++++--
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/pgml-dashboard/src/components/dropdown/mod.rs b/pgml-dashboard/src/components/dropdown/mod.rs
index 847719ca4..ddb8fa49d 100644
--- a/pgml-dashboard/src/components/dropdown/mod.rs
+++ b/pgml-dashboard/src/components/dropdown/mod.rs
@@ -72,7 +72,7 @@ pub struct Dropdown {
     /// Position of the dropdown menu.
     offset: String,
 
-    /// Whether or not the dropdown is collapsable.
+    /// Whether or not the dropdown responds to horizontal collapse, i.e. in product left nav.
     collapsable: bool,
     offset_collapsed: String,
 
diff --git a/pgml-dashboard/src/components/inputs/text/search/search/search_controller.js b/pgml-dashboard/src/components/inputs/text/search/search/search_controller.js
index 70e7c2e32..005e1a2c0 100644
--- a/pgml-dashboard/src/components/inputs/text/search/search/search_controller.js
+++ b/pgml-dashboard/src/components/inputs/text/search/search/search_controller.js
@@ -30,4 +30,11 @@ export default class extends Controller {
   search(id, url) {
     this.element.querySelector(`turbo-frame[id=${id}]`).src = url;
   }
+
+  // Hide the dropdown if the user clicks outside of it.
+  hideDropdown(e) {
+    if (!this.element.contains(e.target)) {
+      this.endSearch();
+    }
+  }
 }
diff --git a/pgml-dashboard/src/components/inputs/text/search/search/template.html b/pgml-dashboard/src/components/inputs/text/search/search/template.html
index 50aa7e40a..ad20adac5 100644
--- a/pgml-dashboard/src/components/inputs/text/search/search/template.html
+++ b/pgml-dashboard/src/components/inputs/text/search/search/template.html
@@ -1,14 +1,16 @@
 <%
   use crate::components::Dropdown;
+  use crate::components::stimulus::stimulus_action::{StimulusAction, StimulusEvents};
+
 %>
 <div data-controller="inputs-text-search-search"
   data-search-frame-id="<%= id %>"
   data-search-frame-url="<%= search_url %>"
->
+  data-action='click@document->inputs-text-search-search#hideDropdown'>
+  
   <%+ input %>
 
   <%+ Dropdown::new_no_button()
       .frame(id, search_url.as_str())
-      .collapsable() 
   %>
 </div>