adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-01-23 06:19:22 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: AutoComplete adds blur_after_select prop (#140)

Browse source
This commit is contained in:
luoxiaozero 2024-03-15 23:50:39 +08:00 • committed by GitHub
parent f996a3b4ea
commit 12273fc7c4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 10 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
demo/src/components/site_header.rs
View file

@ -137,6 +137,7 @@ pub fn SiteHeader() -> impl IntoView {
placeholder="Type '/' to search" placeholder="Type '/' to search"
options=search_options options=search_options
clear_after_select=true clear_after_select=true
blur_after_select=true
on_select=on_search_select on_select=on_search_select
comp_ref=auto_complete_ref comp_ref=auto_complete_ref
> >

1
demo_markdown/docs/auto_complete/mod.md
View file

@ -68,6 +68,7 @@ view! {
| allow_free_input | `bool` | `false` | Whether free text input is allowed. | | allow_free_input | `bool` | `false` | Whether free text input is allowed. |
| invalid | `MaybeSignal<bool>` | `false` | Whether the input is invalid. | | invalid | `MaybeSignal<bool>` | `false` | Whether the input is invalid. |
| clear_after_select | `MaybeSignal<bool>` | `false` | Whether to clear after selection. | | 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. | | 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. | | attr: | `Vec<(&'static str, Attribute)>` | `Default::default()` | The dom attrs of the input element inside the component. |

9
thaw/src/auto_complete/mod.rs
View file

@ -31,6 +31,7 @@ pub fn AutoComplete(
#[prop(optional, into)] placeholder: OptionalProp<MaybeSignal<String>>, #[prop(optional, into)] placeholder: OptionalProp<MaybeSignal<String>>,
#[prop(optional, into)] options: MaybeSignal<Vec<AutoCompleteOption>>, #[prop(optional, into)] options: MaybeSignal<Vec<AutoCompleteOption>>,
#[prop(optional, into)] clear_after_select: MaybeSignal<bool>, #[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)] on_select: Option<Callback<String>>,
#[prop(optional, into)] disabled: MaybeSignal<bool>, #[prop(optional, into)] disabled: MaybeSignal<bool>,
#[prop(optional, into)] allow_free_input: bool, #[prop(optional, into)] allow_free_input: bool,
@ -58,6 +59,8 @@ pub fn AutoComplete(
css_vars css_vars
}); });
let input_ref = ComponentRef::<InputRef>::new();
let default_index = if allow_free_input { None } else { Some(0) }; let default_index = if allow_free_input { None } else { Some(0) };
let select_option_index = create_rw_signal::<Option<usize>>(default_index); let select_option_index = create_rw_signal::<Option<usize>>(default_index);
@ -89,6 +92,11 @@ pub fn AutoComplete(
select_option_index.set(None); select_option_index.set(None);
} }
is_show_menu.set(false); 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 // 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 |_| { input_ref.on_load(move |_| {
comp_ref.load(AutoCompleteRef { input_ref }); comp_ref.load(AutoCompleteRef { input_ref });
}); });