From 4bb9418a52564984e32666c9383d8eb262e876cf Mon Sep 17 00:00:00 2001
From: Elliott Marquez <emarquez@google.com>
Date: Tue, 19 Dec 2023 16:59:01 -0800
Subject: [PATCH] feat(select): support width fit-content

width: fit-content will resize the select to be the width of its text content + icons. We need to add a wrapper to the menu that is width: 0px so that the width of the menu does not affect the size of the host.
PiperOrigin-RevId: 592382035
---
 select/internal/_shared.scss | 11 ++++++-
 select/internal/select.ts    | 60 +++++++++++++++++++-----------------
 2 files changed, 41 insertions(+), 30 deletions(-)

diff --git a/select/internal/_shared.scss b/select/internal/_shared.scss
index 38cf78516b..60d7242701 100644
--- a/select/internal/_shared.scss
+++ b/select/internal/_shared.scss
@@ -70,10 +70,19 @@
   }
 
   md-menu {
-    min-width: var(--__menu-min-width, inherit);
+    // Not inherited because it is applied every time the menu opens
+    min-width: var(--__menu-min-width);
+    // Inherits from `.menu-wrapper` because it is applied only when
+    // `clampMenuWidth` is true
     max-width: var(--__menu-max-width, inherit);
   }
 
+  .menu-wrapper {
+    width: 0px;
+    height: 0px;
+    max-width: inherit;
+  }
+
   md-menu ::slotted(:not[disabled]) {
     cursor: pointer;
   }
diff --git a/select/internal/select.ts b/select/internal/select.ts
index 4a8775e450..60cd27746b 100644
--- a/select/internal/select.ts
+++ b/select/internal/select.ts
@@ -457,35 +457,37 @@ export abstract class Select extends selectBaseClass {
 
   private renderMenu() {
     const ariaLabel = this.label || (this as ARIAMixinStrict).ariaLabel;
-    return html` <md-menu
-      id="listbox"
-      default-focus="none"
-      role="listbox"
-      tabindex="-1"
-      aria-label=${ariaLabel || nothing}
-      stay-open-on-focusout
-      part="menu"
-      exportparts="focus-ring: menu-focus-ring"
-      anchor="field"
-      style=${styleMap({
-        '--__menu-min-width': `${this.selectWidth}px`,
-        '--__menu-max-width': this.clampMenuWidth
-          ? `${this.selectWidth}px`
-          : undefined,
-      })}
-      .open=${this.open}
-      .quick=${this.quick}
-      .positioning=${this.menuPositioning}
-      .typeaheadDelay=${this.typeaheadDelay}
-      @opening=${this.handleOpening}
-      @opened=${this.redispatchEvent}
-      @closing=${this.redispatchEvent}
-      @closed=${this.handleClosed}
-      @close-menu=${this.handleCloseMenu}
-      @request-selection=${this.handleRequestSelection}
-      @request-deselection=${this.handleRequestDeselection}>
-      ${this.renderMenuContent()}
-    </md-menu>`;
+    return html`<div class="menu-wrapper">
+      <md-menu
+        id="listbox"
+        default-focus="none"
+        role="listbox"
+        tabindex="-1"
+        aria-label=${ariaLabel || nothing}
+        stay-open-on-focusout
+        part="menu"
+        exportparts="focus-ring: menu-focus-ring"
+        anchor="field"
+        style=${styleMap({
+          '--__menu-min-width': `${this.selectWidth}px`,
+          '--__menu-max-width': this.clampMenuWidth
+            ? `${this.selectWidth}px`
+            : undefined,
+        })}
+        .open=${this.open}
+        .quick=${this.quick}
+        .positioning=${this.menuPositioning}
+        .typeaheadDelay=${this.typeaheadDelay}
+        @opening=${this.handleOpening}
+        @opened=${this.redispatchEvent}
+        @closing=${this.redispatchEvent}
+        @closed=${this.handleClosed}
+        @close-menu=${this.handleCloseMenu}
+        @request-selection=${this.handleRequestSelection}
+        @request-deselection=${this.handleRequestDeselection}>
+        ${this.renderMenuContent()}
+      </md-menu>
+    </div>`;
   }
 
   private renderMenuContent() {