angular / components

Component infrastructure and Material Design components for Angular
https://material.angular.io
MIT License
24.32k stars 6.74k forks source link

mat-select is auto close (Angular 5 + material 5) #9119

Closed hafquangbaox closed 6 years ago

hafquangbaox commented 6 years ago

Bug, feature request, or proposal:

mat-select is auto close!

What is the expected behavior?

When i click on the mat select to open dialog for select, dialog show on but auto close. This is my code. <mat-select id="select-page" placeholder="Page" [(ngModel)]="currentPage" name="page" (ngModelChange)="changePage($event)" style="padding: 0px; color: #fff !important;"> <mat-option *ngFor="let page of pages" [value]="page"> {{page.name}} </mat-option> </mat-select>

What is the current behavior?

This happen when i upgrade from angular4 to angular 5

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

My package.json { "name": "admin", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "^5.0.0", "@angular/cdk": "^5.0.0", "@angular/common": "^5.0.0", "@angular/compiler": "^5.0.0", "@angular/core": "^5.0.0", "@angular/forms": "^5.0.0", "@angular/http": "^5.0.0", "@angular/material": "^5.0.0", "@angular/platform-browser": "^5.0.0", "@angular/platform-browser-dynamic": "^5.0.0", "@angular/router": "^5.0.0", "@swimlane/ngx-charts": "^6.1.0", "@swimlane/ngx-dnd": "^3.1.0", "@toverux/ngx-sweetalert2": "^3.0.1", "@types/node": "^6.0.89", "angular-highcharts": "^4.0.7", "angular2-draggable": "^1.0.7", "angular4-color-picker": "^1.4.2", "core-js": "^2.4.1", "d3": "^4.11.0", "highcharts": "^6.0.3", "highlight.js": "^9.12.0", "ng2-ckeditor": "^1.1.13", "ng2-dnd": "^5.0.2", "ng2-file-input": "^1.0.3", "ngx-color-picker": "^4.4.0", "ngx-highlightjs": "^1.2.1", "ngx-markdown-editor": "^1.1.5", "ngx-monaco-editor": "^1.0.4", "ngx-pagination": "^3.0.3", "rxjs": "^5.4.1", "sweetalert2": "^7.0.6", "typescript": "^2.5.3", "zone.js": "^0.8.14" }, "devDependencies": { "@angular/cli": "^1.6.2", "@angular/compiler": "^5.0.0", "@angular/compiler-cli": "^5.0.0", "typescript": "~2.3.3", "@types/highcharts": "^5.0.12", "@types/jasmine": "~2.5.53", "@types/jasminewd2": "~2.0.2", "@types/node": "~6.0.60", "codelyzer": "~3.0.1", "jasmine-core": "~2.6.2", "jasmine-spec-reporter": "~4.1.0", "karma": "~1.7.0", "karma-chrome-launcher": "~2.1.1", "karma-cli": "~1.0.1", "karma-coverage-istanbul-reporter": "^1.2.1", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "ng2-facebook-sdk": "^2.3.1", "protractor": "~5.1.2", "ts-node": "~3.0.4", "tslint": "~5.3.2" } } Please help, i really need it. Sorry for my bad english

julianobrasil commented 6 years ago

It doesn't seem to be a problem with Material (almost 20 days after 5.0.0 has been released, such a problem would have been pointed out by a lot of users).

Something in your setup has messed up with mat-select. Is your mat-select inside a mat-form-field? You'd be better assisted if you post your case in stackoverflow.

Alternatively, if you are sure that this is a problem with mat-select, try to reproduce this behavior in https://stackblitz.com/angular/nvvxbxonrnpb and post the link here.

hafquangbaox commented 6 years ago

Oh, i found a unexpected, when i'm run 'ng serve -aot', mat-select work normal, but i build it to production, error happen. Why? 😃 i can't understand :(

crisbeto commented 6 years ago

That sounds weird. We build material.angular.io using a CLI production build and it doesn't seem to have this issue.

hafquangbaox commented 6 years ago

But i make version of all @angular like https://github.com/angular/material.angular.io/blob/master/package.json#L15 but error still happen :(

I run ng serve and it normal, no bug, but ng build -pro -aot has this bug :(

crisbeto commented 6 years ago

This sounds similar to https://github.com/angular/material2/issues/9120.

jelbourn commented 6 years ago

Closing since I can't really understand what the issue is trying to convey.

angular-automatic-lock-bot[bot] commented 5 years ago

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.