no form in DropdownMenuItem

[blset]

I wanted to use the DropdownMenuItem to submit some form on the page

but the form attr does not make it to the inner button

so I used

           ```
 <DropdownMenuGroup>
                    <li class="singlestage-dropdown-menu-item text-red-900">
                        <button form="formid">{icon!(icondata::LuTrash2)} "Trash"</button>
                    </li>
  </DropdownMenuGroup>

[adoyle0]

Is the form outside of DropdownMenuContent? I suspect this is because the dropdown menu is in a popover which actually renders at a different place in the DOM and gets overlayed if I understand all of that correctly... I'm not sure this will work, or at least I don't trust it to be consistent across browsers. I think you'll have to either give the form a node_ref and use on:click on the button to send it a submit with Leptos, or move the form inside the popover if that's possible. In this case it would be:

<DropdownMenuContent>
    <form>
        ...
    </form>
</DropdownMenuContent>

Is there a reason you're using a dropdown here instead of a select?

[blset]

I am using a dropdown menu that I picked from the examples
I wanted a dropdown menu to trigger different actions from the bottom of a textarea
the show menu uses the form attribute
theses are all action forms for a list of items

view! {
    <ActionForm action=update_contact>
        <input type="hidden" name="id" value=co.id />
        <div class="grid w-full max-w-md gap-4">
            <InputGroup>
                <textarea name="observations" class=" w-full min-h-[150px]">

                    {co.observations}
                </textarea>
                <InputGroupAddon align="block-end" class="border-t">

                    <ShowMenu cid=co.id eid=eid /> **<= this dropdown menu contains an line that triggers the sibling action form (which is invisible)**
                    <Button button_type="submit">
                        {icon!(icondata::LuSave)} {move || update_contact.version().get()}
                    </Button>
                </InputGroupAddon>

            </InputGroup>
        </div>
    </ActionForm>
    <ActionForm action=remove_assoc attr:id=format!("remove-assoc-{}-{}", co.id, eid)>
        <input type="hidden" name="cid" value=co.id />
        <input type="hidden" name="eid" value=eid />
    </ActionForm>
}

[adoyle0]

Huh, something about being inside an InputGroup is blocking the ActionForm..

Both InputGroup and Field wrap their children with a Provider and provide a context. The input group context seems to block the action form where the field context does not.. InputGroupContext is empty though which may be the reason. This feels like a bug (or feature) in Leptos.

use leptos::prelude::*;
use singlestage::*;

#[server]
pub async fn test_action(text: String) -> Result<(), ServerFnError> {
    leptos::logging::log!("{}", text);
    Ok(())
}

#[component]
pub fn TestRoute() -> impl IntoView {
    let test_action = ServerAction::<TestAction>::new();

    view! {
        <ActionForm action=test_action>
            <InputGroup>
                <Input name="text" value="hey" />
                <DropdownMenu>
                    <DropdownMenuTrigger>
                        <Button button_type="button">"drop"</Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent>
                        <Button>"drop Submit"</Button>
                    </DropdownMenuContent>
                </DropdownMenu>
                <Button>"group Submit"</Button>
            </InputGroup>
            <Button>"raw Submit"</Button>

            <Field>
                <Button>"field Submit"</Button>
            </Field>
        </ActionForm>
    }
}

[adoyle0]

Er, scratch all of that lol. I looked at it again, I see what you mean now. Button type defaults to button when inside an input group and needs to be set to type submit. I believe I did this to prevent triggers from submitting forms.

So I think the thing to do is check not for if it's inside an input group, but just if it's a trigger. So all buttons inside forms that are not triggers (or popover menu items) will submit the form by default, which may not be intentional but at least it's the default html behavior. I think it's reasonable to assume buttons used to trigger popovers aren't intended to submit their parent form.

Popover menu items are also buttons, I did this for accessibility but now it's in the way for things like this.. Maybe I'll add an as_child prop so you can do something like:

<DropdownMenuItem as_child=true>
    <Button ... />
</DropdownMenuItem>

// OR

<DropdownMenuItem as_child=true>
    <Link ... />
</DropdownMenuItem>

Thanks for the report, I never would have thought of this.

[blset]

all right but I did not get caught by button type, it's the form attribute of the button inside DropdownMenuItem that cannot be set as an attribute through DropdownMenuItem api, hence i replaced with <li><button form=xxx></button> </li> and it works

so as you said above better using noderef anyway, but on firefox it works ok with form=

[adoyle0]

I'm saying if I didn't reset the button type then you wouldn't have this problem to begin with