Components: md-expansion-panel with a button

[CopperGiraffe]

Bug, feature request, or proposal:

More a request than a bug I suppose

What is the expected behavior?

When having a button in <md-expansion-panel-header> the button should trigger normaly without collapsing the panel.

What is the current behavior?

Clicking the button collapses the panel

What are the steps to reproduce?

http://plnkr.co/edit/QFkAL500pcgqxLgL9BnF?p=preview

What is the use-case or motivation for changing an existing behavior?

I believe it should behave a little bit like a toolbar (+ the expansion part), it would be great.
A class should maybe exist to prevent this behavior in the <md-expansion-panel-header> tag

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Is there anything else we should know?

[julianobrasil]

That's because of Material Design Specification for expansion panels (by Google). According to the doc:

"_A collapsed panel displays summary information_"

I think that an action button does not fit in this description. All components of the official set must stick to these specifications.

[jelbourn]

The panel header is a button with respect to accessibility, so adding more buttons or anchors inside of it is not something we support.

[roben]

I had a similar requirement. A list of panels providing summaries with edit functionality when being expanded. Each should also contain a selection checkbox without having to expand it first.

The way I managed to do this is by putting the checkbox outside of the md-expansion-panel and positioning it absolutely on top of it (the header needs some padding, then):

[ragavanrandy]

how to prevent from expansion or else disable the expansion panel for some specific reason?

[julianobrasil]

disableMe = false;

<mat-expansion-panel [disabled]="disableMe"></mat-expansion>

But with javascript a lot of things are possible. It's almost impossible to prevent what you want as the user has access to code via browser developer tools. You should write the protection code in the backend.

[kuncevic]

That is what I am trying to do:

Basically I have a filters thing, so I want to show the basic filter by default and then if user want to apply more filters the panel has to be expanded by clicking the expand button.

Now if user clicked any controls on in the header it trigger the panel to expand. It would of be nice to be able to have an option that you can expand panel only by clicking the dedicated expand button in the right corner.

However by reading the responses on that issue seams like it is against the Expansion Panel Google material style guide however it is something in my spec that I have to implement and seems like mat-expansion-panel is the best thing to address that.

@julianobrasil Tried to set [disabled]="false" but now it prevents the panel to be expanded.

What do you think is the best way of handle that?

UPDATE:
I kind of work it out by playing with disabled attribute say like putting a button in the mat-panel-description that call the expandPannel()

<mat-expansion-panel class="mat-expansion-demo-width" [disabled]="true" #myPanel>
  <mat-expansion-panel-header>
    <mat-panel-description>
        <div>
          <div>
            Filter Date:&nbsp;
            <mat-form-field>
              <input matInput [matDatepicker]="minDatePicker" [(ngModel)]="minDate" placeholder="Min date">
              <mat-datepicker-toggle matSuffix [for]="minDatePicker"></mat-datepicker-toggle>
              <mat-datepicker #minDatePicker [touchUi]="true"></mat-datepicker>
            </mat-form-field>
            <mat-form-field>
              <input matInput [matDatepicker]="maxDatePicker" [(ngModel)]="maxDate" placeholder="Max date">
              <mat-datepicker-toggle matSuffix [for]="maxDatePicker"></mat-datepicker-toggle>
              <mat-datepicker #maxDatePicker [touchUi]="true"></mat-datepicker>
            </mat-form-field>
            <mat-checkbox labelPosition="after">Consolidate Stores</mat-checkbox>
          </div>
          <div class="actions">
            <button mat-icon-button color="primary" (click)="expandPannel()">
                <mat-icon>{{matIcon}}</mat-icon>
            </button>
          </div>
      </div>
    </mat-panel-description>
  </mat-expansion-panel-header>

matIcon = 'keyboard_arrow_down' || 'keyboard_arrow_up';
expandPannel() {
    this.myPanel.expanded = !this.myPanel.expanded;
  }



md5-802a6ec7a2526091f4e56fc357ad8281



/deep/ .mat-expansion-indicator::after {
  visibility: hidden !important;
  display: none !important;
}

But it is kind of hacky I would say. It would of be much nicer if Expansion Panel could handle such case.

UPDATE:
working example based on the code above https://stackblitz.com/edit/angular-3jcuzp

[ver0nikadataformers]

is this still considered an open issue? Even if the spec defines the expansion panel header as only summary information, as reality shows, there are cases when this behaviour simply is necessary. all of the proposed solutions do their job but still are indeed quire hacky to quote @kuncevic

[ortichon]

Hi guys,
I solved similar issue by adding (click)="foo($event)" to the check-box element, then in the Component I do

foo(event: Event) {
  event.stopPropagation();
}

[hobojoe]

@kuncevic could you share your example?

I tried implementing it but the controls aren't placed properly on the expansion-panel header:
https://stackblitz.com/edit/angular-vkval7

Thanks!

[kuncevic]

@hobojoe hey there sorry missed your comment
here it is the working example based on my comment above https://stackblitz.com/edit/angular-3jcuzp

[ver0nikadataformers]

thanks for sharing your solution @kuncevic

[jsantoru]

great solution @ortichon. thanks!

[zijianhuang]

+1 to @ortichon. Action bar at the bottom may not be desired. I would have Add and Delete button on the top.

I am using expansion-panel as alternative to treeview which is available in NG MD6.

[jainankit102]

@ortichon stopPropogation() work for click event but for 'Enter' event toggle is happening. I tried with stopPropogation and preventDefault also both are not working.

Thanks in advance.

[micsel]

Temporary trick I used below works fine for now...
<mat-expansion-panel [disabled]="true">
<mat-expansion-panel-header style="color: #222222">
<mat-panel-title>Title</mat-panel-title>
<mat-panel-description style="color: #999999">Description</mat-panel-description>
</mat-expansion-panel-header>

Working example: https://stackblitz.com/edit/angular-kcggqm

[ortichon]

@jainankit102 @micsel
can you provide a working example (plunker or similar)?

[Reachakhil]

@ortichon solution worked good!!

[zevenements]

I've done one time like this, it's working but not very elegant..

html:

<mat-accordion>
    <mat-expansion-panel [disabled]="isDisabled">

      <mat-expansion-panel-header>
        <mat-panel-title> <div>
            <div class="...">
              some text ...
            </div>    
            <button (click)="action()" >MY BUTTON WONT EXPAND</button>
          </div>
 </mat-panel-title>
      </mat-expansion-panel-header>
.....
  </mat-expansion-panel>
 </mat-accordion>

js:

action(){
 this.isDisabled=true
    setTimeout(() => {  this.isDisabled=false; }, 0);
`}`

[feech]

I suggest you implement your functionality with the tree-component. It looks like the expansion panel but supports controls everywhere

[harshadray]

Hi guys,
I solved similar issue by adding (click)="foo($event)" to the check-box element, then in the Component I do

foo(event: Event) {
  event.stopPropagation();
}

it works great when button enable but somehow if I need to disable button, it will not works. Do you have any work around for that case?

[feech]

I gave up to extend expansion panel behavior. but had success with 'tree' component - that's my workaround for all questions above

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}