Skip to content

Commit 4bb9418

Browse files
Elliott Marquezcopybara-github
authored andcommitted
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
1 parent d06a3e7 commit 4bb9418

File tree

2 files changed

+41
-30
lines changed

2 files changed

+41
-30
lines changed

select/internal/_shared.scss

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,10 +70,19 @@
7070
}
7171

7272
md-menu {
73-
min-width: var(--__menu-min-width, inherit);
73+
// Not inherited because it is applied every time the menu opens
74+
min-width: var(--__menu-min-width);
75+
// Inherits from `.menu-wrapper` because it is applied only when
76+
// `clampMenuWidth` is true
7477
max-width: var(--__menu-max-width, inherit);
7578
}
7679

80+
.menu-wrapper {
81+
width: 0px;
82+
height: 0px;
83+
max-width: inherit;
84+
}
85+
7786
md-menu ::slotted(:not[disabled]) {
7887
cursor: pointer;
7988
}

select/internal/select.ts

Lines changed: 31 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -457,35 +457,37 @@ export abstract class Select extends selectBaseClass {
457457

458458
private renderMenu() {
459459
const ariaLabel = this.label || (this as ARIAMixinStrict).ariaLabel;
460-
return html` <md-menu
461-
id="listbox"
462-
default-focus="none"
463-
role="listbox"
464-
tabindex="-1"
465-
aria-label=${ariaLabel || nothing}
466-
stay-open-on-focusout
467-
part="menu"
468-
exportparts="focus-ring: menu-focus-ring"
469-
anchor="field"
470-
style=${styleMap({
471-
'--__menu-min-width': `${this.selectWidth}px`,
472-
'--__menu-max-width': this.clampMenuWidth
473-
? `${this.selectWidth}px`
474-
: undefined,
475-
})}
476-
.open=${this.open}
477-
.quick=${this.quick}
478-
.positioning=${this.menuPositioning}
479-
.typeaheadDelay=${this.typeaheadDelay}
480-
@opening=${this.handleOpening}
481-
@opened=${this.redispatchEvent}
482-
@closing=${this.redispatchEvent}
483-
@closed=${this.handleClosed}
484-
@close-menu=${this.handleCloseMenu}
485-
@request-selection=${this.handleRequestSelection}
486-
@request-deselection=${this.handleRequestDeselection}>
487-
${this.renderMenuContent()}
488-
</md-menu>`;
460+
return html`<div class="menu-wrapper">
461+
<md-menu
462+
id="listbox"
463+
default-focus="none"
464+
role="listbox"
465+
tabindex="-1"
466+
aria-label=${ariaLabel || nothing}
467+
stay-open-on-focusout
468+
part="menu"
469+
exportparts="focus-ring: menu-focus-ring"
470+
anchor="field"
471+
style=${styleMap({
472+
'--__menu-min-width': `${this.selectWidth}px`,
473+
'--__menu-max-width': this.clampMenuWidth
474+
? `${this.selectWidth}px`
475+
: undefined,
476+
})}
477+
.open=${this.open}
478+
.quick=${this.quick}
479+
.positioning=${this.menuPositioning}
480+
.typeaheadDelay=${this.typeaheadDelay}
481+
@opening=${this.handleOpening}
482+
@opened=${this.redispatchEvent}
483+
@closing=${this.redispatchEvent}
484+
@closed=${this.handleClosed}
485+
@close-menu=${this.handleCloseMenu}
486+
@request-selection=${this.handleRequestSelection}
487+
@request-deselection=${this.handleRequestDeselection}>
488+
${this.renderMenuContent()}
489+
</md-menu>
490+
</div>`;
489491
}
490492

491493
private renderMenuContent() {

0 commit comments

Comments
 (0)