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

Bug - Dropdown panel won't close after extending mat-select #16312

Closed
codler opened this issue Jun 18, 2019 · 2 comments

Comments

Projects
None yet
2 participants
@codler
Copy link

commented Jun 18, 2019

Reproduction

https://stackblitz.com/edit/angular-vdyjcy?file=src%2Fapp%2Fapp.component.html

I want to extend mat-select like this

app.component.ts

<app-select>
  <mat-option>Value1</mat-option>
  <mat-option>Value2</mat-option>
  <mat-option>Value3</mat-option>
  <mat-option>Value4</mat-option>
</app-select>

select.component.ts

<mat-form-field>
  <mat-select>
    <mat-option>
      None
    </mat-option>
    <ng-content></ng-content>
  </mat-select>
</mat-form-field>

Steps to reproduce:

  1. Click on the dropdown to open the panel.
  2. Click on a value in the dropdown panel.

Expected Behavior

The dropdown panel should close after choosing a value

Actual Behavior

The dropdown panel is still open and nothing happens.

Environment

  • Angular: 8.0.1, same bug in 7
  • CDK/Material: 8.0.1/8.0.1, same bug in 7
  • Browser(s): Chrome/Firefox
  • Operating System (e.g. Windows, macOS, Ubuntu): Windows
@jelbourn

This comment has been minimized.

Copy link
Member

commented Jun 18, 2019

Extending the components isn't something we actively support (though we don't do anything to prevent people from doing it).

(except for components where we explicitly document extension, like CdkStepper)

@jelbourn jelbourn closed this Jun 18, 2019

@codler

This comment has been minimized.

Copy link
Author

commented Jun 19, 2019

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