rework focus handling to allow non consecutive and out of order indexes

Author: knoxfighter

primitives/src/select/components/list.rs

@@ -81,7 +81,7 @@ pub fn SelectList(props: SelectListProps) -> Element {
 
     let mut open = ctx.open;
     let mut listbox_ref: Signal<Option<std::rc::Rc<MountedData>>> = use_signal(|| None);
-    let focused = move || open() && !ctx.focus_state.any_focused();
+    let focused = move || open() && !ctx.any_focused();
 
     use_effect(move || {
         let Some(listbox_ref) = listbox_ref() else {

primitives/src/select/components/option.rs

@@ -1,12 +1,12 @@
 //! SelectOption and SelectItemIndicator component implementations.
 
 use crate::{
-    focus::use_focus_controlled_item,
     select::context::{RcPartialEqValue, SelectListContext},
     use_effect, use_effect_cleanup, use_id_or, use_unique_id,
 };
 use dioxus::html::input_data::MouseButton;
 use dioxus::prelude::*;
+use std::rc::Rc;
 
 use super::super::context::{OptionState, SelectContext, SelectOptionContext};
 
@@ -28,7 +28,7 @@ pub struct SelectOptionProps<T: Clone + PartialEq + 'static> {
     #[props(default)]
     pub id: ReadSignal<Option<String>>,
 
-    /// The index of the option in the list. This is used to define the focus order for keyboard navigation.
+    /// The index of the option in the list. This is used to define the focus order for keyboard navigation. Each option must have a unique index.
     pub index: ReadSignal<usize>,
 
     /// Optional label for the option (for accessibility)
@@ -136,19 +136,36 @@ pub fn SelectOption<T: PartialEq + Clone + 'static>(props: SelectOptionProps<T>)
             value: RcPartialEqValue::new(value.cloned()),
             text_value: text_value.cloned(),
             id: id(),
-            disabled
+            disabled,
         };
 
         // Add the option to the context's options
-        ctx.options.write().push(option_state);
+        ctx.options
+            .write()
+            .insert(option_state.tab_index, option_state);
     });
 
     use_effect_cleanup(move || {
-        ctx.options.write().retain(|opt| opt.id != *id.read());
+        ctx.options.write().remove(&index());
     });
 
-    let onmounted = use_focus_controlled_item(props.index);
-    let focused = move || ctx.focus_state.is_focused(index());
+    // customized focus handle for this option. Based on `use_focus_controlled_item`.
+    let mut controlled_ref: Signal<Option<Rc<MountedData>>> = use_signal(|| None);
+    use_effect(move || {
+        if disabled {
+            return;
+        }
+        let is_focused = ctx.is_focused(index.cloned());
+        if is_focused {
+            if let Some(md) = controlled_ref() {
+                spawn(async move {
+                    let _ = md.set_focus(true).await;
+                });
+            }
+        }
+    });
+
+    let focused = move || ctx.is_focused(index());
     let selected = use_memo(move || {
         ctx.value.read().as_ref().and_then(|v| v.as_ref::<T>()) == Some(&props.value.read())
     });
@@ -165,7 +182,7 @@ pub fn SelectOption<T: PartialEq + Clone + 'static>(props: SelectOptionProps<T>)
                 role: "option",
                 id,
                 tabindex: if focused() { "0" } else { "-1" },
-                onmounted,
+                onmounted: move |data: Event<MountedData>| controlled_ref.set(Some(data.data())),
 
                 // ARIA attributes
                 aria_selected: selected(),
@@ -184,7 +201,7 @@ pub fn SelectOption<T: PartialEq + Clone + 'static>(props: SelectOptionProps<T>)
                 },
                 onblur: move |_| {
                     if focused() {
-                        ctx.focus_state.blur();
+                        ctx.blur();
                         ctx.open.set(false);
                     }
                 },

primitives/src/select/components/select.rs

@@ -1,14 +1,14 @@
 //! Main Select component implementation.
 
 use core::panic;
+use std::collections::BTreeMap;
 use std::time::Duration;
 
 use crate::{select::context::RcPartialEqValue, use_controlled, use_effect};
 use dioxus::prelude::*;
 use dioxus_core::Task;
 
 use super::super::context::SelectContext;
-use crate::focus::use_focus_provider;
 
 /// Props for the main Select component
 #[derive(Props, Clone, PartialEq)]
@@ -109,7 +109,7 @@ pub fn Select<T: Clone + PartialEq + 'static>(props: SelectProps<T>) -> Element
 
     let open = use_signal(|| false);
     let mut typeahead_buffer = use_signal(String::new);
-    let options = use_signal(Vec::default);
+    let options = use_signal(BTreeMap::new);
     let adaptive_keyboard = use_signal(super::super::text_search::AdaptiveKeyboard::new);
     let list_id = use_signal(|| None);
     let mut typeahead_clear_task: Signal<Option<Task>> = use_signal(|| None);
@@ -130,8 +130,6 @@ pub fn Select<T: Clone + PartialEq + 'static>(props: SelectProps<T>) -> Element
         }
     });
 
-    let focus_state = use_focus_provider(props.roving_loop);
-
     // Clear the typeahead buffer when the select is closed
     use_effect(move || {
         if !open() {
@@ -144,21 +142,23 @@ pub fn Select<T: Clone + PartialEq + 'static>(props: SelectProps<T>) -> Element
         }
     });
     let initial_focus_last = use_signal(|| None);
+    let current_focus = use_signal(|| None);
 
     use_context_provider(|| SelectContext {
         typeahead_buffer,
         open,
         value,
         set_value,
         options,
+        roving_loop: props.roving_loop,
         adaptive_keyboard,
         list_id,
-        focus_state,
         disabled: props.disabled,
         placeholder: props.placeholder,
         typeahead_clear_task,
         typeahead_timeout: props.typeahead_timeout,
         initial_focus_last,
+        current_focus,
     });
 
     rsx! {

primitives/src/select/components/value.rs

@@ -70,9 +70,9 @@ pub fn SelectValue(props: SelectValueProps) -> Element {
         value.as_ref().and_then(|v| {
             ctx.options
                 .read()
-                .iter()
-                .find(|opt| opt.value == *v)
-                .map(|opt| opt.text_value.clone())
+                .values()
+                .find(|state| state.value == *v)
+                .map(|state| state.text_value.clone())
         })
     });