Clickable entries in Details summary?

When we use Details, I currently always open just the 1st one.
However, my users might want it differently.

I’m toying with the idea of putting a lock/unlock icon in the summary. That works, but click on the lock also toggles the Details open/close. Is there any way to prevent the click from propagating?

You can use the Element API to add a click listener that is configured to stop the event from propagating to the parent element:

button.getElement().addEventListener("click", event -> {}).stopPropagation();
1 Like

That worked like a charm :grinning:


1 Like

Keep in mind that the summary itself is a button. Placing a button inside a button is not valid valid HTML and it can cause accessibility issues.

You could wrap the details and lock button in a layout instead and use absolute positioning to place the button to the right.

1 Like

We have decided against lock/unlock buttons, but I’m curious:
It is a <vaadin-details-summary … role=“button”>
Where does it actually state that an <xxx … role=“button”> can’t contain <yyy … role=“button”> ?

Phrasing content, but there must be no interactive content descendant and no descendant with the tabindex attribute specified.

But that is for <button>, not <xxx … role=“button”>

I can see the “walks like a duck, quacks like a duck” logic, and that maybe it can cause accessibility issues, but I’m still not convinced that it isn’t valid html.

<!DOCTYPE html>
<html lang="en">
    <div role="button">
      <div role="button"></div>

Error: An element with the attribute role=button must not appear as a descendant of an element with the attribute role=button.

Can’t argue with that. Thanks :smiley: