feat(mat-select): In `MatSelectConfig` add a new possible value for `panelwith`: 'GrowIfLargerThanTriggerWidth'

[Yanal-Yves]

Feature Description

Currently MatSelectConfig offers the panelWidth property with 3 possible values :

1. 'auto' - The panel will match the trigger width.
2. A specific value (ex : 40px)
3. null - The panel will grow to match the longest option's text.

What I need is a mix between auto and null :

1. If the longest option's text is bigger than the trigger width, the panel would grow to match the longest option's text.
2. If the longest option's text is smaller than the trigger width, the panel would match the trigger width

I suggest to name this new behavior: GrowIfLargerThanTriggerWidth

Use Case

If the options of the MatSelect are data driven (ex: coming from a database), we cannot define a specific width for the panel. None of the possible values of panelWidth offer a satisfying result :

Ex1: panelWidth: 'auto', with small options

Ex2: ``panelWidth: 'null', with large options

[Yanal-Yves]

We found a workaround :

1. Use 'auto' to benefit from the existing behavior that set the panel width to the trigger width.
2. Add a custom CSS on the overlay panel that defines a min-width to the max-content to enlarge the panel when the content in the panel is bigger than the trigger width (cf. overlayPanelClass) :

overlayPanelClass: 'custom-combo-panel'

.custom-combo-panel {
  min-width: max-content;
}

Results in my app

Result when the content in the panel is smaller than the trigger width :

Result when the content in the panel is bigger than the trigger width :

Feeling

I feel it should be more simple to obtain this behavior, so I still believe this feature needs to be implemented.