Skip to content

Commit

Permalink
Update mushroom-select.ts
Browse files Browse the repository at this point in the history
  • Loading branch information
rhys-e2 authored Apr 1, 2024
1 parent 901f2ae commit 6f346bb
Showing 1 changed file with 25 additions and 0 deletions.
25 changes: 25 additions & 0 deletions src/shared/form/mushroom-select.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,10 @@ import { SelectBase } from "@material/mwc-select/mwc-select-base";
import { styles } from "@material/mwc-select/mwc-select.css";
import { css, html, nothing } from "lit";
import { customElement, property } from "lit/decorators.js";
import {classMap} from 'lit/directives/class-map.js';
import { debounce, nextRender } from "../../ha";
import './mushroom-select-menu.js'


@customElement("mushroom-select")
export class MushroomSelect extends SelectBase {
Expand All @@ -17,6 +20,27 @@ export class MushroomSelect extends SelectBase {
return html`<span class="mdc-select__icon"><slot name="icon"></slot></span>`;
}

override renderMenu() {
const classes = this.getMenuClasses();
// swap out mwc-menu for mushroom-select-menu. Bindings and template taken from source.
return html`
<mushroom-select-menu
innerRole="listbox"
wrapFocus
class=" ${classMap(classes)}"
activatable
.fullwidth=${this.fixedMenuPosition ? false : !this.naturalMenuWidth}
.open=${this.menuOpen}
.anchor=${this.anchorElement}
@selected=${this.onSelected}
@opened=${this.onOpened}
@closed=${this.onClosed}
@items-updated=${this.onItemsUpdated}
@keydown=${this.handleTypeahead}>
${this.renderMenuContent()}
</mushroom-select-menu>`;
}

connectedCallback() {
super.connectedCallback();
window.addEventListener("translations-updated", this._translationsUpdated);
Expand Down Expand Up @@ -47,3 +71,4 @@ declare global {
"mushroom-select": MushroomSelect;
}
}

0 comments on commit 6f346bb

Please sign in to comment.