From ad7cf7de15b20f1006ead6ededaa4c8ce9edc020 Mon Sep 17 00:00:00 2001
From: Victoria League <vleague@bitwarden.com>
Date: Mon, 7 Oct 2024 11:27:16 -0400
Subject: [PATCH] [CL-303] Prevent chip menu from running offscreen (#11348)

---
 .../src/chip-select/chip-select.component.html   |  7 ++++++-
 .../src/chip-select/chip-select.component.ts     | 16 ++++++++++++++++
 .../src/chip-select/chip-select.stories.ts       |  2 +-
 libs/components/src/menu/menu-item.directive.ts  |  2 +-
 4 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/libs/components/src/chip-select/chip-select.component.html b/libs/components/src/chip-select/chip-select.component.html
index 486bfc51665..012905da3da 100644
--- a/libs/components/src/chip-select/chip-select.component.html
+++ b/libs/components/src/chip-select/chip-select.component.html
@@ -22,6 +22,7 @@
     [disabled]="disabled"
     [title]="label"
     #menuTrigger="menuTrigger"
+    (click)="setMenuWidth()"
   >
     <span class="tw-inline-flex tw-items-center tw-gap-1.5 tw-truncate">
       <i class="bwi !tw-text-[inherit]" [ngClass]="icon"></i>
@@ -57,7 +58,11 @@
 </div>
 
 <bit-menu #menu (closed)="handleMenuClosed()">
-  <div *ngIf="renderedOptions" class="tw-max-h-80 tw-min-w-52 tw-max-w-80 tw-text-sm">
+  <div
+    *ngIf="renderedOptions"
+    class="tw-max-h-80 tw-min-w-32 tw-max-w-80 tw-text-sm"
+    [ngStyle]="menuWidth && { width: menuWidth + 'px' }"
+  >
     <ng-container *ngIf="getParent(renderedOptions) as parent">
       <button
         type="button"
diff --git a/libs/components/src/chip-select/chip-select.component.ts b/libs/components/src/chip-select/chip-select.component.ts
index 9862ea22c2e..e8986be2fce 100644
--- a/libs/components/src/chip-select/chip-select.component.ts
+++ b/libs/components/src/chip-select/chip-select.component.ts
@@ -98,6 +98,12 @@ export class ChipSelectComponent<T = unknown> implements ControlValueAccessor, A
   /** The option that is currently selected by the user */
   protected selectedOption: ChipSelectOption<T>;
 
+  /**
+   * The initial calculated width of the menu when it opens, which is used to
+   * keep the width consistent as the user navigates through submenus
+   */
+  protected menuWidth: number | null = null;
+
   /** The label to show in the chip button */
   protected get label(): string {
     return this.selectedOption?.label || this.placeholderText;
@@ -122,6 +128,8 @@ export class ChipSelectComponent<T = unknown> implements ControlValueAccessor, A
 
   protected handleMenuClosed(): void {
     this.setOrResetRenderedOptions();
+    // reset menu width so that it can be recalculated upon open
+    this.menuWidth = null;
   }
 
   protected selectOption(option: ChipSelectOption<T>, _event: MouseEvent) {
@@ -201,6 +209,14 @@ export class ChipSelectComponent<T = unknown> implements ControlValueAccessor, A
     });
   }
 
+  /**
+   * Calculate the width of the menu according to the initially rendered options
+   */
+  protected setMenuWidth() {
+    this.menuWidth =
+      this.menu.menuItems.first.elementRef.nativeElement.getBoundingClientRect().width;
+  }
+
   /** Control Value Accessor */
 
   private notifyOnChange?: (value: T) => void;
diff --git a/libs/components/src/chip-select/chip-select.stories.ts b/libs/components/src/chip-select/chip-select.stories.ts
index f8ed5ee49f3..598fa5b80be 100644
--- a/libs/components/src/chip-select/chip-select.stories.ts
+++ b/libs/components/src/chip-select/chip-select.stories.ts
@@ -163,7 +163,7 @@ export const NestedOptions: Story = {
         icon: "bwi-folder",
         children: [
           {
-            label: "Foo1",
+            label: "Foo1 very long name of folder but even longer than you thought",
             value: "foo1",
             icon: "bwi-folder",
             children: [
diff --git a/libs/components/src/menu/menu-item.directive.ts b/libs/components/src/menu/menu-item.directive.ts
index 2c69b0784c5..def8fbd9f85 100644
--- a/libs/components/src/menu/menu-item.directive.ts
+++ b/libs/components/src/menu/menu-item.directive.ts
@@ -41,7 +41,7 @@ export class MenuItemDirective implements FocusableOption {
 
   @Input({ transform: coerceBooleanProperty }) disabled?: boolean = false;
 
-  constructor(private elementRef: ElementRef) {}
+  constructor(public elementRef: ElementRef<HTMLButtonElement>) {}
 
   focus() {
     this.elementRef.nativeElement.focus();