diff --git a/libs/components/src/chip-select/chip-select.component.html b/libs/components/src/chip-select/chip-select.component.html index e66a8452ef4..81480f107f1 100644 --- a/libs/components/src/chip-select/chip-select.component.html +++ b/libs/components/src/chip-select/chip-select.component.html @@ -24,6 +24,7 @@ [title]="label" #menuTrigger="menuTrigger" (click)="setMenuWidth()" + #chipSelectButton > diff --git a/libs/components/src/chip-select/chip-select.component.ts b/libs/components/src/chip-select/chip-select.component.ts index e8986be2fce..5bf4da82724 100644 --- a/libs/components/src/chip-select/chip-select.component.ts +++ b/libs/components/src/chip-select/chip-select.component.ts @@ -2,6 +2,7 @@ import { AfterViewInit, Component, DestroyRef, + ElementRef, HostBinding, HostListener, Input, @@ -45,6 +46,7 @@ export type ChipSelectOption = Option & { export class ChipSelectComponent implements ControlValueAccessor, AfterViewInit { @ViewChild(MenuComponent) menu: MenuComponent; @ViewChildren(MenuItemDirective) menuItems: QueryList; + @ViewChild("chipSelectButton") chipSelectButton: ElementRef; /** Text to show when there is no selected option */ @Input({ required: true }) placeholderText: string; @@ -210,11 +212,16 @@ export class ChipSelectComponent implements ControlValueAccessor, A } /** - * Calculate the width of the menu according to the initially rendered options + * Calculate the width of the menu based on whichever is larger, the chip select width or the width of + * the initially rendered options */ protected setMenuWidth() { - this.menuWidth = + const chipWidth = this.chipSelectButton.nativeElement.getBoundingClientRect().width; + + const firstMenuItemWidth = this.menu.menuItems.first.elementRef.nativeElement.getBoundingClientRect().width; + + this.menuWidth = Math.max(chipWidth, firstMenuItemWidth); } /** Control Value Accessor */