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}; + %>

+ data-action='click@document->inputs-text-search-search#hideDropdown'> + <%+ input %> <%+ Dropdown::new_no_button() .frame(id, search_url.as_str()) - .collapsable() %>

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.

Alternative Proxies: