CODEWITHSUNDEEP
vaadinvaadin-flowvaadin14
herman
herman

Reputation: 12305

Vaadin Accordion with Button in summary

In my Vaadin 14 app, I want to add an Accordion component that has several components in its summary (which is always displayed), among which a Button. Clicking in the summary normally toggles the display of the AccordionPanel content. How can I prevent the AccordionPanel to collapse/expand when the button in the summary is clicked?

Objects are created simply as follows:

Accordion accordion = new Accordion();

MyPanel panel = new MyPanel();

accordion.add(panel);

with MyPanel constructor simply calling setSummary() with a layout containing the button.

Upvotes: 3

Views: 704

Answers (3)

Borja Bravo
Borja Bravo

Reputation: 41

Since Vaadin 24.2 Issues nº1363 is solved and we can do

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

Note that stopPropagation() is only available in DomListenerRegistration but not in Registration

Upvotes: 1

herman
herman

Reputation: 12305

I found the answer in this thread on the forum.

It turns out you can prevent the propagation of the button click with this hack:

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

This seems like a core functionality that the framework should provide out of the box, but this ticket is still open.

Upvotes: 3

Jeroen
Jeroen

Reputation: 169

Adding this to your view:

    UI.getCurrent().getPage()
    .executeJs("Array.from(document.getElementsByTagName('vaadin-accordion-panel')).forEach(element=>element.shadowRoot.querySelector(\"div[role=button]\").replaceWith(element.shadowRoot.querySelector(\"div[role=button]\").cloneNode(true)))");

will disable all clicks on all the accordions toggle and accordion summary. However you will need to include a button or trigger for opening and closing the accordion. I don't know if this is what you want?

Upvotes: 0

Related Questions