CODEWITHSUNDEEP
cssangularangular-material
core114
core114

Reputation: 5335

mat-expansion-panel to added drop down open issue

I added Angular material mat-expansion-panel to select option ,when I click the select menu, mat-expansion-panel is auto open, anyone know how to fix that issue,

Stack blitz example

My code

component.html

<mat-accordion>
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
       <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
      </mat-panel-title>
      <mat-panel-description>
        Type your name and age
      </mat-panel-description>
    </mat-expansion-panel-header>

    <mat-form-field>
      <input matInput placeholder="First name">
    </mat-form-field>

    <mat-form-field>
      <input matInput placeholder="Age">
    </mat-form-field>
  </mat-expansion-panel>
  <mat-expansion-panel (opened)="panelOpenState = true"
                       (closed)="panelOpenState = false">
    <mat-expansion-panel-header>
      <mat-panel-title>
        Self aware panel
      </mat-panel-title>
      <mat-panel-description>
        Currently I am {{panelOpenState ? 'open' : 'closed'}}
      </mat-panel-description>
    </mat-expansion-panel-header>
    <p>I'm visible because I am open</p>
  </mat-expansion-panel>
</mat-accordion>

Upvotes: 0

Views: 3408

Answers (3)

Carsten
Carsten

Reputation: 4208

I don't have the issue you describe but i understand what you mean. What happens is that when you click on the select, you also click on the expansion panel. You can prevent this behaviour by preventing the click to pass through the select.

stopPropagation

In your HTML change the select to: 

<select class="form-control" id="exampleFormControlSelect1" (click)="$event.stopPropagation()">

Upvotes: 5

לבני מלכה
לבני מלכה

Reputation: 16261

Use stopPropagation to mat-panel-title

 <mat-panel-title  (click)="$event.stopPropagation();">

See working code

Upvotes: 1

uminder
uminder

Reputation: 26190

You could try the following:

<select (click)="$event.stopPropagation();">

Upvotes: 1

Related Questions