bug(mat-select): Select component options truncate when the option text doesn't contain any white spaces

[natechiarello]

Is this a regression?

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

The previous version in which this bug was not present was

No response

Description

Since version 15, very long text options in a mat-select element are no longer truncated, but break onto multiple lines.

However, if you have no white spaces in the option text, then the option will truncate.

The expected behaviour is to have some consistency across all options, whether it be that they all truncate or they wrap onto multiple lines.

By inspecting the code it seems that options are using truncation applied to list items, with which they share the "mdc-list-item__primary-text" class

However, that is been overridden for options in a select element (the white-space: normal property below)

which is indeed causing options to wrap if too long, but not if they don't contain any white space.

Reproduction

This can be reproduced in the Angular Material Documentation by changing the text in any two options in dev tools https://v15.material.angular.io/components/select/examples

Expected Behavior

All options with long text, with or without white-spaces, should have a consistent behaviour, either truncate or wrap onto multiple lines.

Actual Behavior

Two different behaviours as described in the description above

Environment

• Angular: 16.2.8
• CDK/Material: 16.2.7
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[maruthumj]

@natechiarello I think this is the expected behaviour only.

[natechiarello]

@maruthumj if we are expecting the text to never truncate (as the comment says), then white-space: normal won't be enough because in one case, when the text doesn't contain any white-space, it will truncate.

Are you saying that it is expected behaviour that options will break onto multiple line by default, but if the option text doesn't have any white spaces, then it is expected behaviour that the option truncates?

[zarend]

Hello @natechiarello ,

Thank you for reaching out. We need more information.

Expected Behavior All options with long text, with or without white-spaces, should have a consistent behaviour, either truncate or wrap onto multiple lines.

I do not know of any specific requirements that MatSelect has for truncation. I understand that different truncation may be appropriate depending on the application. We need more information to show what the requirements say the expected behavior should be :).

As a work-around, I believe you should be able to override styles to get the behavior you would like.

Without a clear requirement, I am not sure if action can be taken on this.

Do you know of anything in Material Design that specifies how truncation should be? Or, do you have a reference implementation? It would be helpful if there was something to show what truncation should in general.

Best Regards,

Zach

[natechiarello]

Neither Material Design documentations (versions 2 - https://m2.material.io/components/lists nor version 3 - https://m3.material.io/components/lists/overview) make it very clear. There doesn't seem to be a dedicated area defining what the expected behaviour should be for long text select items, and we see mixed behaviour in the screenshots they use. For example in version 2 they show truncation: as well as multilines:

Similarly in version 3 we have truncation: multilines: and even a mix of both (truncation on second line):

Angular Material 15 supports Material Design version 2, so we should probably check against that for now. Given that there are no definitive guidelines on this, I guess both approaches could do, although it seems clear that a decision was taken to go from truncation to multilines from Angular Material version 14 to version 15, as shown in the screenshot below from the version 14 website https://v14.material.angular.io/components/select/examples

This bug fix request could be closed as long as this inconsistency was expected and not caused by mistake (by inconsistency I mean the different behaviour in version 15 between a very long select option with space which breaks onto multiple lines versus a very long select option without any spaces, which will get truncated, as described when I raised this item).

Hope this info helps.