Skip to content

Errors when using a native select inside a mat-form-field #14101

@jjreynoldsMatric

Description

@jjreynoldsMatric

Bug, feature request, or proposal:

When you place a native select inside a mat-form-field, many TypeErrors occur.

ERROR TypeError: Cannot read property 'label' of undefined
at MatInput.get [as shouldLabelFloat] (input.es5.js:590)
at MatFormField.push../node_modules/@angular/material/esm5/form-field.es5.js.MatFormField._shouldLabelFloat (form-field.es5.js:535)
at Object.eval [as updateRenderer] (FormComponent.html:10)
at Object.debugUpdateRenderer [as updateRenderer] (core.js:20458)
at checkAndUpdateView (core.js:19833)
at callViewAction (core.js:20069)
at execComponentViewsAction (core.js:20011)
at checkAndUpdateView (core.js:19834)
at callViewAction (core.js:20069)
at execComponentViewsAction (core.js:20011)

What is the expected behavior?

No errors should occur. The field's placeholder should be on the same line as the select's arrow until the select is clicked. Its should then float into a label, similar to how inputs react with the matInput directive.

What is the current behavior?

Getting TypeErrors. The placeholder is always floating, even when no option is chosen.

What are the steps to reproduce?

StackBlitz was giving me problems, so I created a sample repo showcasing the error: https://github.com/jjreynoldsMatric/native-select-error-angular-material

To reproduce: Create a form with a native select inside a mat-form-field with a matNativeControl directive on it. As far as I've seen, this is all it takes.

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

To allow support for native select lists

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

This occurs in both Chrome and Edge.
Angular CLI: 7.0.5
Node: 10.13.0
OS: win32 x64
Angular: 7.0.3
... animations, cdk, common, compiler, compiler-cli, core, forms
... http, language-service, material, platform-browser
... platform-browser-dynamic, platform-server, router

Package Version

@angular-devkit/architect 0.10.5
@angular-devkit/build-angular 0.10.5
@angular-devkit/build-optimizer 0.10.5
@angular-devkit/build-webpack 0.10.5
@angular-devkit/core 7.0.5
@angular-devkit/schematics 7.0.5
@angular/cli 7.0.5
@ngtools/webpack 7.0.5
@schematics/angular 7.0.5
@schematics/update 0.10.5
rxjs 6.3.3
typescript 3.1.6
webpack 4.25.1

Is there anything else we should know?

This interferes with the validity of the form. In a project that is not the git repo I provided, the select is a required field. The errors allow the form to be submitted with no data selected and in an invalid state.

Metadata

Metadata

Assignees

Labels

P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions