1

The following code causes a form to be submitted on the parent component when the dropdown is clicked. Setting the type as "button" on the Developer Console fixes the issue, but is there a way to set the type in the markup? How can I workaround this bug?

<lightning:buttonMenu onopen="{! c.onOpen }" onselect="{! c.onSelect }" menuAlignment="right" alternativeText="Show menu" class="slds-button_last">
    <lightning:menuItem label="Specify Agent" value="specify_agent" />
    <lightning:menuItem label="Define Relationship" value="define_relationship" />
</lightning:buttonMenu>

1 Answer 1

1

This is the default behavior of forms and buttons, which was specified in the original HTML specifications in the early 1990s. You should be able to capture the event that causes this behavior to prevent the form from being submitted:

<div onclick={cancelEvent}>
<lightning:buttonMenu onopen="{! c.onOpen }" onselect="{! c.onSelect }" menuAlignment="right" alternativeText="Show menu" class="slds-button_last">
    <lightning:menuItem label="Specify Agent" value="specify_agent" />
    <lightning:menuItem label="Define Relationship" value="define_relationship" />
</lightning:buttonMenu>
</div>
cancelEvent(event) {
  event.preventDefault();
  event.stopPropagation();
}
1
  • Thank you. Although the chevron button is also just another button according to the browser, I assumed that the Aura component would handle that it's not a "submit" button. With no type attribute on the lightning:buttonMenu, I was lost. Your solution works around the issue nicely. Commented Jun 12, 2023 at 13:11

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .