hide search dropdown on click out (#1566)

chillenberger · web-flow · commit c4477e221ce6 · 2024-07-16T13:06:40.000-06:00
diff --git 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
@@ -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
@@ -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>

Original file line number	Diff line number	Diff line change
`@@ -30,4 +30,11 @@ export default class extends Controller {`
`30`	`30`	`search(id, url) {`
`31`	`31`	this.element.querySelector(`turbo-frame[id=${id}]`).src = url;
`32`	`32`	`}`
	`33`	`+`
	`34`	`+ // Hide the dropdown if the user clicks outside of it.`
	`35`	`+ hideDropdown(e) {`
	`36`	`+ if (!this.element.contains(e.target)) {`
	`37`	`+ this.endSearch();`
	`38`	`+ }`
	`39`	`+ }`
`33`	`40`	`}`