From 0ae1ef29d546423eefe508dadd3a5fa53a8edf23 Mon Sep 17 00:00:00 2001 From: tommy Date: Fri, 7 Nov 2025 15:03:40 +0800 Subject: [PATCH] fix style --- assets/styling/shadcn.css | 5 +++-- src/components/ui/select.rs | 31 ++++++++++++++++++++++++------- 2 files changed, 27 insertions(+), 9 deletions(-) diff --git a/assets/styling/shadcn.css b/assets/styling/shadcn.css index b202a6a..1ae2e52 100644 --- a/assets/styling/shadcn.css +++ b/assets/styling/shadcn.css @@ -631,7 +631,6 @@ .ui-card-header { display: flex; flex-direction: column; - gap: 0.5rem; padding: 1.5rem 1.5rem 0 1.5rem; } @@ -1141,7 +1140,9 @@ width: 1rem; height: 1rem; color: hsl(var(--muted-foreground)); - transition: transform 0.2s ease, color 0.2s ease; + transition: + transform 0.2s ease, + color 0.2s ease; } .ui-select-icon svg { diff --git a/src/components/ui/select.rs b/src/components/ui/select.rs index 05182c4..3aa12ac 100644 --- a/src/components/ui/select.rs +++ b/src/components/ui/select.rs @@ -1,4 +1,5 @@ use dioxus::prelude::*; +use std::rc::Rc; #[derive(Clone, PartialEq)] pub struct SelectOption { @@ -28,6 +29,17 @@ pub fn Select( let current = use_signal(move || selected.clone()); let on_change_handler = on_change.clone(); let trigger_id = id.unwrap_or_default(); + let mut container_ref = use_signal(|| None as Option>); + + use_effect(move || { + if open() { + if let Some(container) = container_ref.read().clone() { + spawn(async move { + _ = container.set_focus(true).await; + }); + } + } + }); let selected_value = current(); let display_text = selected_value @@ -44,8 +56,15 @@ pub fn Select( div { class: "ui-select", "data-disabled": disabled, - onclick: move |event| { - event.stop_propagation(); + tabindex: "-1", + onmounted: move |event| { + container_ref.set(Some(event.data())); + }, + onblur: { + let mut open_signal = open.clone(); + move |_| { + open_signal.set(false); + } }, button { class: "ui-select-trigger", @@ -84,9 +103,6 @@ pub fn Select( if open() { div { class: "ui-select-content", - onclick: move |event| { - event.stop_propagation(); - }, div { class: "ui-select-list", for option in options.iter().cloned() { @@ -104,10 +120,11 @@ pub fn Select( button { class: "ui-select-item", "data-state": if is_active { "active" } else { "inactive" }, - onclick: { + onmousedown: { let value = value.clone(); let handler = handler.clone(); - move |_| { + move |event| { + event.prevent_default(); current_signal.set(Some(value.clone())); if let Some(callback) = handler.clone() { callback.call(value.clone());