Skip to content

feat(aria): Combobox and Menu should using CDK overlay with the same approach #32678

@CSchulz

Description

@CSchulz

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    featureThis issue represents a new feature or feature request rather than a bug or bug fixneeds triageThis issue needs to be triaged by the team

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions