Details Component with Button in Summary - Need to prevent Content from ope

Flow
1

I have a details component with buttons in the summary slot. When clicking those buttons the click event fires on the Details component as well, which causes the content to open. I need to prevent this so that the user can click those buttons without causing the details to open. One work around is to reverse the details “opened” state in the button click listener. However this results in the details quickly opening and then closing in the browser. I also tried extending the Details class in order to hijack the “setOpened” method, however it appears that method is not called for the internal “opened” state change.

Is there a more effective way to accomplish this? Perhaps some way to allow the button to capture the click and prevent it from reaching the detail component?

2

Figured it out based on comments here: https://github.com/vaadin/flow/issues/1363

Event propagation from a button can be stopped via the JS command event.stopPropagation(). And can be triggered from a DOM listener on the button element.

button.getElement().addEventListener("click", click -> {
			//do nothing
}).addEventData("event.stopPropagation()");

Because this is on the Button, and not the Details component, it needs to be done for every Button instance.