Combobox

A text field that suggests options from a list as the visitor types.

Result

combobox.rs

use hypersig::html::div;
use hypersig::style::Style;
use hypersig::style::value::rem;
use hypersig::{Page, Signals};
use hypersig_ui::{Combobox, ComboboxState};
use serde::{Deserialize, Serialize};

#[derive(Signals, Serialize, Deserialize)]
pub struct Shipping {
    country: ComboboxState,
}

const COUNTRY: Combobox<Shipping> = Combobox::new("country", "country-options");

pub fn page() -> Page<Shipping> {
    let initial = Shipping {
        country: ComboboxState::new(""),
    };
    Page::new(
        "Shipping",
        initial,
    )
    .child(
        div()
            .css(Style::new().max_width(rem(20)))
            .child(COUNTRY.render(
                "Country",
                Shipping::country(),
                [
                        "Brazil", "Canada", "France", "Germany", "India", "Japan", "Kenya",
                        "Mexico", "Norway", "Spain",
                    ],
            )),
    )
}

Accessibility

It follows the WAI-ARIA combobox pattern with list autocomplete. The text field has role="combobox", aria-expanded, aria-controls, and aria-activedescendant, and focus stays in it while the arrows move through the options shown, through El::active_descendant. Typing shows the options that contain the text, ignoring case.

Declare the combobox as a const naming its text field and its list, and keep its state in a ComboboxState field of the page's signals. The chosen text is ComboboxState::text. The visitor can leave text that matches no option, which the page checks where it needs one of the options.

Key	What it does
Typing	Opens the list and shows the options that contain the text.
Down	Opens the list, then moves to the next option shown.
Up	Moves to the previous option shown.
Enter	Chooses the option the arrow keys moved to and closes the list.
Escape	Closes the list, or clears the text when it is closed. A dialog around the combobox does not close on it from the text field.

API

Item	Summary
`Combobox::new`	A combobox whose text field has the id `field` and whose list has the id `list`.
`render`	The label, the text field, and the list of `options`, keeping their state in `state`.
`ComboboxState`	The signals a `Combobox` keeps.
`ComboboxState::new`	A closed combobox whose text field holds `text`.