Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How can I prevent a mat-expansion-panel from opening when clicked? #17651

Open
TheParad0X opened this issue Nov 8, 2019 · 5 comments

Comments

@TheParad0X
Copy link

@TheParad0X TheParad0X commented Nov 8, 2019

I want to control my mat-expansion-panel solely with the panel's [expanded] input property. I am using NGRX as state management.

Therefore, I don't want the panel to open when clicked. Instead, I have my own click listener that will dispatch the right action that will lead to the panel to open.

How can I prevent it from opening when clicked? I tried (click)="$event.stopImmediatePropagation(); but it does not do the trick.

<mat-accordion [multi]="true">
  <mat-expansion-panel [expanded]="item.isOpen">
    <mat-expansion-panel-header (click)="togglePanel($event, item)">
        <!-- Header Content-->
    </mat-expansion-panel-header>

    <ng-template matExpansionPanelContent>
        <!-- Panel Content -->
    </ng-template>
  </mat-expansion-panel>
</mat-accordion>

Any ideas?

@crisbeto

This comment has been minimized.

Copy link
Member

@crisbeto crisbeto commented Nov 8, 2019

You can bind to the disabled property on the mat-expansion-panel.

@manklu

This comment has been minimized.

Copy link

@manklu manklu commented Nov 9, 2019

@crisbeto That would change the appearance, make it unusable with keyboard and propagate wrong information to screen readers. It should just not open automatically 😉

Ideally there would be a boolean input to disable automatic opening and an event so the developer doesn't need to write the listener itself.

Btw this may be useful for other components too. e.g. Tabs, Tree etc.

@crisbeto

This comment has been minimized.

Copy link
Member

@crisbeto crisbeto commented Nov 9, 2019

Isn't this the point though? Otherwise the user would click it without any feedback on why nothing is happening.

@qirex

This comment has been minimized.

Copy link

@qirex qirex commented Nov 9, 2019

using css to disable pointer events works:

.disabled-pointer {
  pointer-events: none;
}
<mat-expansion-panel class="disabled-pointer">
  ...content...
</mat-expansion-panel>

See https://stackblitz.com/edit/angular-wykguu for example

@manklu

This comment has been minimized.

Copy link

@manklu manklu commented Nov 9, 2019

@crisbeto The event handler will dispatch an action and as result of the action processing and state change the panel will open.

In the easiest case the action will just open the panel. But it's also possible to open the panel only after you have successfully loaded data from external sources, or display an error if that fails.

The possibilities of what is done before opening the panel are almost unlimited.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.