Mat-Select is not functioning properly after angular and material version upgrade from v10 to v15.2.4

[rishwanthrajaa]

Is this a regression?

• [X] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

Angular V10.1.5 and Material V10.2.4

Description

This report is regarding dropdown field issue of Angular Material V15.2.4 (Mat-Select)

Recently, we have upgraded our project's angular version from v10.1.5 to v15.2.4. Application's drop down fields were working fine in angular v10.1.5 and material v10.2.4. But when the version got upgraded with angular v15.2.4 and material v15.2.4., all the drop down fields are facing issue in showing the selected option.

Issue:

• There is no issue in listing the options.
• After selecting any one of the option, mat-select has to show up the selected option.
• But the field is blank after selecting an option.

Support Needed

• Angular support team to provide a solution to fix the issue in Mat-Select drop down.
• To provide if any code changes or import level changes has to be done.
• We have tested with angular v15.2.4 and material version as v12.2.13, all seems fine.
• Is it fine to have a downgraded material version with higher angular version?.

Kindly respond whether it is a good standard to have Angular v15.2.4 and material v12.2.13 as part of production release or provide an fix for the issue in the upgraded versions for both angular and material v15.2.4.

Below one is the actual issue

Reproduction

Steps to reproduce:

1. Set the angular version as 15.2.4 and material version as 15.2.4
2. Inject a Mat-Select drop down field in template
3. Set a list of options in .ts file for Mat-options (Example - Apple, Orange, Mango etc)
4. Options will be binding correctly in the selectable drop down.
5. Select any one of the values from the drop down list. Issue - After selecting, selected value will not show up in the field.

Expected Behavior

The expected behavior is - After selecting any one of the option, mat-select has to show up the selected option.

Expected working one as mentioned in this example - https://material.angular.io/components/select/examples#select-form

Actual Behavior

Actual behavior - After selecting an option, selected value does not show up in the Mat-Select Field.

Below one the case where the field is empty after selecting an option. This is the broken drop down issue

Environment

• Angular: v15.2.4
• CDK/Material: CDK - v15.2.4 and Material - v15.2.4
• Browser(s): Google Chrome and Microsoft Edge
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[rishwanthrajaa]

Please go through the issue, actual issue is - After selecting an option from drop down, selected value is not showing up. Kindly respond as comment and request not to close it immediately.

[crisbeto]

As mentioned the previous time this issue was opened, this isn't enough information to debug the issue. Can you post what your code looks like?

[rishwanthrajaa]

HTML Code

Favorite food {{food.viewValue}}

TS Code @Component({ selector: 'select-form-example', templateUrl: 'select-form-example.html', }) export class SelectFormExample { selectedValue: string; selectedCar: string;

foods: Food[] = [ {value: 'steak-0', viewValue: 'Steak'}, {value: 'pizza-1', viewValue: 'Pizza'}, {value: 'tacos-2', viewValue: 'Tacos'}, ];

cars: Car[] = [ {value: 'volvo', viewValue: 'Volvo'}, {value: 'saab', viewValue: 'Saab'}, {value: 'mercedes', viewValue: 'Mercedes'}, ]; }

The above is the code, but after selecting an option, selected value is not shown in mat-select field

[rishwanthrajaa]

This is the exact code in the project, but selected value is not displaying in the field, it worked fine in anglular materal v10 and angular core v10, but same code is not working in when both material and angular version is v15

[crisbeto]

This is likely an issue somewhere else in your app. The snippet from above works for me. See https://stackblitz.com/edit/6sjsie?file=src%2Fapp%2Fselect-custom-trigger-example.ts,src%2Fapp%2Fselect-custom-trigger-example.html,src%2Fapp%2Fapp.module.ts

[rishwanthrajaa]

Yeah, we tried the same snippet in other application/compliers, its working for me. But in the project's application is not working as expected still, not sure why.

Okay, can you please let me know, as per angular's standard, its good to keep Angular v15 and Material v12 in production environment? If yes, we can go with this, we did not face any issue on the drop down. Kindly let me know on this version compatibility.

[crisbeto]

In general we recommend that Material and Core are on the same major version (so both 15) or you might run into weird build issues.

[rishwanthrajaa]

As of now, there is no build or compilation error while deployment, anyway after a year angular version will be updated. So can we keep v12 and angular v15, then later can we address the compatibility issue?

[rishwanthrajaa]

Until material v12 all are fine, we have the drop down issue from v13, that's why not sure how to proceed on this. We have used reactive forms to create formcontrols and ngModel for data binding, will that be a problem after material v12?

[crisbeto]

It's at your own risk if you want to stay on the mismatched versions. The internals of mat-select haven't changed significantly in a couple of years.

[rishwanthrajaa]

I understand, since the application was built in v10 initially, after v15 Angular Material 15 styles for legacy components has showed up right. Will there any issue due to those legacy theme or something?

[richardsengers]

In your image you have a dot in [(ngModel).] , maybe thats the reason? haha

[rishwanthrajaa]

Its only in image, in application its not, we can ignore it. Due to CSS or material theming, will it cause the issue? And in similar way for mat-select, is there any issue reported to Angular?

[crisbeto]

I'm closing the issue since this is likely a problem somewhere else in your app. Better avenues for troubleshooting / questions are stack overflow, gitter, mailing list, etc.

[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.}