Function DropdownMenuTrigger

primitives/src/dropdown_menu.rs:220–274

(props: DropdownMenuTriggerProps)

/// - `data-disabled`: Indicates if the dropdown menu is disabled. values are `true` or `false`.
#[component]
pub fn DropdownMenuTrigger(props: DropdownMenuTriggerProps) -> Element {
    let mut ctx: DropdownMenuContext = use_context();
    let mut element = use_signal(|| None::<Rc<MountedData>>);

    let open = ctx.open;
    let disabled = ctx.disabled;
    let data_state = if open() { "open" } else { "closed" };

    let base = attributes!(button {
        id: ctx.trigger_id,
        r#type: "button",
        "data-state": data_state,
        "data-disabled": disabled,
        disabled: disabled,
        aria_expanded: open,
        aria_haspopup: "listbox",
        onmounted: move |e: MountedEvent| {
            element.set(Some(e.data()));
        },
        onclick: move |_| {
            if disabled() {
                return;
            }

            let new_open = !open();
            ctx.set_open.call(new_open);

            // Focus the element on click. Safari does not do this automatically.
            // https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#clicking_and_focus
            if let Some(data) = element() {
                spawn(async move {
                    _ = data.set_focus(true).await;
                });
            }
        },
        onblur: move |_| {
            if !ctx.focus.any_focused() {
                ctx.focus.clear_focus();
                ctx.set_open.call(false);
            }
        },
    });
    let merged = merge_attributes(vec![base, props.attributes]);

    if let Some(dynamic) = props.r#as {
        dynamic.call(merged)
    } else {
        rsx! {
            button {
                ..merged,
                {props.children}
            }
        }
    }
}

/// The props for the [`DropdownMenuContent`] component
#[derive(Props, Clone, PartialEq)]