From 7e09088ab0064bb6e623c48b3a92409a6c9ff39b Mon Sep 17 00:00:00 2001
From: Victoria League <vleague@bitwarden.com>
Date: Fri, 8 Nov 2024 15:57:52 -0500
Subject: [PATCH] [CL-498] Set chip menu width minimum to chip select width
 (#11905)

---
 .../src/chip-select/chip-select.component.html        |  1 +
 .../src/chip-select/chip-select.component.ts          | 11 +++++++++--
 2 files changed, 10 insertions(+), 2 deletions(-)

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
   >
     <span class="tw-inline-flex tw-items-center tw-gap-1.5 tw-truncate">
       <i class="bwi !tw-text-[inherit]" [ngClass]="icon"></i>
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<T> = Option<T> & {
 export class ChipSelectComponent<T = unknown> implements ControlValueAccessor, AfterViewInit {
   @ViewChild(MenuComponent) menu: MenuComponent;
   @ViewChildren(MenuItemDirective) menuItems: QueryList<MenuItemDirective>;
+  @ViewChild("chipSelectButton") chipSelectButton: ElementRef<HTMLButtonElement>;
 
   /** Text to show when there is no selected option */
   @Input({ required: true }) placeholderText: string;
@@ -210,11 +212,16 @@ export class ChipSelectComponent<T = unknown> 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 */