-
Notifications
You must be signed in to change notification settings - Fork 6.8k
Description
Feature Description
During the work on own implementations I have encountered that the menu and combobox examples are using different kind of implementations to work with the cdk overlay.
To have good maintainable code it would be nice if they are working on the same way.
The overlay will be rendered if the menu is visible (source: https://angular.dev/guide/aria/menu#example-1):
<ng-template
[cdkConnectedOverlayOpen]="formatMenu.visible()"
The overlay is always rendered and will be controlled by css (source: https://angular.dev/guide/aria/combobox#example-7):
<ng-template ngComboboxPopupContainer>
<ng-template
[cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
[cdkConnectedOverlayOpen]="true"
>
[ngCombobox]:has([[ngComboboxInput](https://angular.dev/api/aria/combobox/ComboboxInput)][aria-expanded='false']) .example-popup-container {
max-height: 0;
opacity: 0;
visibility: hidden;
Changing the behavior of the cdk overlay to use also the combobox.expanded() signal results into issues that the keyboard events doesn't trigger the overlay correctly.
Use Case
It would make the implementation of both components much easier, if there is not such a big difference with CSS styling between the components. It took me some time to understand why we need the CSS for the combobox.
Additional I can imaginge if you have a lot of combobox in a big form active and they are just set hidden, the tag will still get rendered and updated.