Struct Combobox 

pub struct Combobox<S> { /* private fields */ }

A combobox on a page whose signals are S: a text field with a list of options that the text filters.

Declare one as a const naming its text field and its list, since the runtime finds both by name. 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 up and down arrows move through the options shown, through El::active_descendant. Typing opens the list and shows the options that contain the text, ignoring case, the down arrow opens it, Enter chooses the option the arrows reached, and Escape closes the list or, when it is closed, clears the text. Choosing an option puts its label in the text field and closes the list, and so does leaving the field, unless the pointer is on the list.

Escape is taken by the combobox while focus is in its text field, so a dialog around it closes on Escape only from elsewhere. The visitor can also leave text that matches no option, which the page checks where it needs one of the options. The text field and the list carry node refs with their names, so two comboboxes with one name on a page make Page::render panic.

use hypersig::Signals;
use hypersig_ui::{Combobox, ComboboxState};
use serde::{Deserialize, Serialize};

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

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

let field = COUNTRY.render("Country", Form::country(), ["France", "Japan", "Kenya"]);
let html = field.render();
assert!(html.contains(r#"role="combobox""#));
assert!(html.contains(r#"aria-controls="country-options""#));

Implementations

impl<S> Combobox<S>

pub const fn new(field: &'static str, list: &'static str) -> Self

A combobox whose text field has the id field and whose list has the id list.

Panics

Panics if either name is empty or holds a character other than an ASCII letter, digit, -, or _, or if the two are equal. In a const, that is a compile error.

pub fn render<L: Into<String>>( self, label_text: impl Into<String>, state: Sig<S, ComboboxState>, options: impl IntoIterator<Item = L>, ) -> El<S>

The label, the text field, and the list of options, in a <div>, keeping their state in state.

Trait Implementations

impl<S> Clone for Combobox<S>

fn clone(&self) -> Self

Returns a duplicate of the value.

fn clone_from(&mut self, source: &Self)

Performs copy-assignment from source.

impl<S> Copy for Combobox<S>

impl<S> Debug for Combobox<S>

fn fmt(&self, f: &mut Formatter<'_>) -> Result

Formats the value using the given formatter.