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
material-components · Dec 20, 2023 · 4bb9418 · 4bb9418
1 parent d06a3e7
commit 4bb9418
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 30 deletions.
diff --git 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
@@ -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() {