Material ui expansion panel can't click custom buttons within it

Question

Within a <mat-expansion-panel>'s description I have 3 icons acting as buttons. The icons are displayed but they can not be clicked, basically they are under the expansion panel. z-index approaches don't work. A solution that I found was to give the icon-buttons this property pointer-events: visiblefill !important;. Although the icons can be clicked by using this property, every time I click one of them it will also expand the panel.

P.S. I also have these global properties to restrict the expansion only by using the arrow button:

span.mat-expansion-indicator {
  pointer-events: visiblefill !important;
}

mat-expansion-panel-header {
  pointer-events: none;
}

Please, show how you are using the mat-expansion – Hoch Jun 14 '21 at 14:19 — Hoch, Jun 14 '21 at 14:19

score 0 · Answer 1 · answered Jun 14 '21 at 14:21

0

It appears this does the trick:

function(event: any) {
    event.stopPropagation();
    // Do what you want
  }

answered Jun 14 '21 at 14:21

ShadowProg

13
3

Material ui expansion panel can't click custom buttons within it

1 Answers1