From 12273fc7c4a1e2b2164dee369bc764bd23689a99 Mon Sep 17 00:00:00 2001
From: luoxiaozero <48741584+luoxiaozero@users.noreply.github.com>
Date: Fri, 15 Mar 2024 23:50:39 +0800
Subject: [PATCH] feat: AutoComplete adds blur_after_select prop (#140)

---
 demo/src/components/site_header.rs      | 1 +
 demo_markdown/docs/auto_complete/mod.md | 1 +
 thaw/src/auto_complete/mod.rs           | 9 ++++++++-
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/demo/src/components/site_header.rs b/demo/src/components/site_header.rs
index 730c869..6e0764f 100644
--- a/demo/src/components/site_header.rs
+++ b/demo/src/components/site_header.rs
@@ -137,6 +137,7 @@ pub fn SiteHeader() -> impl IntoView {
                     placeholder="Type '/' to search"
                     options=search_options
                     clear_after_select=true
+                    blur_after_select=true
                     on_select=on_search_select
                     comp_ref=auto_complete_ref
                 >
diff --git a/demo_markdown/docs/auto_complete/mod.md b/demo_markdown/docs/auto_complete/mod.md
index bdf11d7..9074973 100644
--- a/demo_markdown/docs/auto_complete/mod.md
+++ b/demo_markdown/docs/auto_complete/mod.md
@@ -68,6 +68,7 @@ view! {
 | allow_free_input | `bool` | `false` | Whether free text input is allowed. |
 | invalid | `MaybeSignal<bool>` | `false` | Whether the input is invalid. |
 | clear_after_select | `MaybeSignal<bool>` | `false` | Whether to clear after selection. |
+| blur_after_select | `MaybeSignal<bool>` | `false` | Whether to blur after selection. |
 | on_select | `Option<Callback<String>>` | `None` | On select callback function. |
 | attr: | `Vec<(&'static str, Attribute)>` | `Default::default()` | The dom attrs of the input element inside the component. |
 
diff --git a/thaw/src/auto_complete/mod.rs b/thaw/src/auto_complete/mod.rs
index 30e308c..15d0fba 100644
--- a/thaw/src/auto_complete/mod.rs
+++ b/thaw/src/auto_complete/mod.rs
@@ -31,6 +31,7 @@ pub fn AutoComplete(
     #[prop(optional, into)] placeholder: OptionalProp<MaybeSignal<String>>,
     #[prop(optional, into)] options: MaybeSignal<Vec<AutoCompleteOption>>,
     #[prop(optional, into)] clear_after_select: MaybeSignal<bool>,
+    #[prop(optional, into)] blur_after_select: MaybeSignal<bool>,
     #[prop(optional, into)] on_select: Option<Callback<String>>,
     #[prop(optional, into)] disabled: MaybeSignal<bool>,
     #[prop(optional, into)] allow_free_input: bool,
@@ -58,6 +59,8 @@ pub fn AutoComplete(
         css_vars
     });
 
+    let input_ref = ComponentRef::<InputRef>::new();
+
     let default_index = if allow_free_input { None } else { Some(0) };
 
     let select_option_index = create_rw_signal::<Option<usize>>(default_index);
@@ -89,6 +92,11 @@ pub fn AutoComplete(
             select_option_index.set(None);
         }
         is_show_menu.set(false);
+        if blur_after_select.get_untracked() {
+            if let Some(input_ref) = input_ref.get_untracked() {
+                input_ref.blur();
+            }
+        }
     };
 
     // we unset selection index whenever options get changed
@@ -147,7 +155,6 @@ pub fn AutoComplete(
             }
         }
     };
-    let input_ref = ComponentRef::<InputRef>::new();
     input_ref.on_load(move |_| {
         comp_ref.load(AutoCompleteRef { input_ref });
     });