Last active
April 23, 2023 17:44
-
-
Save e111077/f740bdff9ea4e62a64fae47bbdf5797e to your computer and use it in GitHub Desktop.
MWC Select working inside an MWC dialog
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<head> | |
<script type="module" src="./simple-greeting.js"></script> | |
</head> | |
<body> | |
<simple-greeting name="World"></simple-greeting> | |
</body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import {SelectBase} from '@material/mwc-select/mwc-select-base.js'; | |
import {styles} from '@material/mwc-select/mwc-select.css.js'; | |
import {html} from 'lit'; | |
import {customElement} from 'lit/decorators.js'; | |
import {classMap} from 'lit/directives/class-map.js'; | |
import './my-menu.js' | |
@customElement('my-select') | |
export class Select extends SelectBase { | |
static styles = styles; | |
override renderMenu() { | |
const classes = this.getMenuClasses(); | |
// swap out mwc-menu for my-menu. Bindings and template taken from source. | |
return html` | |
<my-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()} | |
</my-menu>`; | |
} | |
} | |
declare global { | |
interface HTMLElementTagNameMap { | |
'my-select': Select; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"dependencies": { | |
"lit": "^2.0.0", | |
"@lit/reactive-element": "^1.0.0", | |
"lit-element": "^3.0.0", | |
"lit-html": "^2.0.0" | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import {html, css, LitElement} from 'lit'; | |
import {customElement, property, query} from 'lit/decorators.js'; | |
import '@material/mwc-button'; | |
import '@material/mwc-dialog'; | |
import type {Dialog} from '@material/mwc-dialog'; | |
import '@material/mwc-list/mwc-list-item.js'; | |
import '@material/mwc-select'; | |
import './my-select.js'; | |
@customElement('simple-greeting') | |
export class SimpleGreeting extends LitElement { | |
static styles = css` | |
.noOverflow { | |
border: 1px solid black; | |
padding: 8px; | |
overflow: hidden; | |
/* This changes what children postition:fixed elements are relative to */ | |
transform: translate(0px); | |
} | |
table { | |
/* This changes what children postition:fixed elements are relative to */ | |
transform: translate(0px); | |
}`; | |
@query('mwc-dialog') dialogEl!: Dialog; | |
render() { | |
return html` | |
<table> | |
<tr> | |
<th>Old (default)</th> | |
<th>Old (fixedMenuPosition)</th> | |
<th>New (with native dialog)</th> | |
</tr> | |
<tr> | |
<td class="noOverflow"> | |
<mwc-select outlined> | |
<mwc-list-item selected></mwc-list-item> | |
<mwc-list-item value="apple">Apple</mwc-list-item> | |
<mwc-list-item value="banana">Banana</mwc-list-item> | |
<mwc-list-item value="coconut">Coconut</mwc-list-item> | |
<mwc-list-item value="durian">Durian</mwc-list-item> | |
</mwc-select> | |
</td> | |
<td class="noOverflow"> | |
<mwc-select outlined fixedMenuPosition> | |
<mwc-list-item selected></mwc-list-item> | |
<mwc-list-item value="apple">Apple</mwc-list-item> | |
<mwc-list-item value="banana">Banana</mwc-list-item> | |
<mwc-list-item value="coconut">Coconut</mwc-list-item> | |
<mwc-list-item value="durian">Durian</mwc-list-item> | |
</mwc-select> | |
</td> | |
<td class="noOverflow"> | |
<my-select outlined> | |
<mwc-list-item selected></mwc-list-item> | |
<mwc-list-item value="apple">Apple</mwc-list-item> | |
<mwc-list-item value="banana">Banana</mwc-list-item> | |
<mwc-list-item value="coconut">Coconut</mwc-list-item> | |
<mwc-list-item value="durian">Durian</mwc-list-item> | |
</my-select> | |
</td> | |
</tr> | |
</table> | |
<mwc-button raised @click=${() => this.dialogEl.show()}>Click To Open Dialog</mwc-button> | |
<mwc-dialog> | |
<table> | |
<tr> | |
<th>Old (default)</th> | |
<th>Old (fixedMenuPosition)</th> | |
<th>New (with native dialog)</th> | |
</tr> | |
<tr> | |
<td> | |
<mwc-select outlined> | |
<mwc-list-item selected></mwc-list-item> | |
<mwc-list-item value="apple">Apple</mwc-list-item> | |
<mwc-list-item value="banana">Banana</mwc-list-item> | |
<mwc-list-item value="coconut">Coconut</mwc-list-item> | |
<mwc-list-item value="durian">Durian</mwc-list-item> | |
</mwc-select> | |
</td> | |
<td> | |
<mwc-select outlined fixedMenuPosition> | |
<mwc-list-item selected></mwc-list-item> | |
<mwc-list-item value="apple">Apple</mwc-list-item> | |
<mwc-list-item value="banana">Banana</mwc-list-item> | |
<mwc-list-item value="coconut">Coconut</mwc-list-item> | |
<mwc-list-item value="durian">Durian</mwc-list-item> | |
</mwc-select> | |
</td> | |
<td> | |
<my-select outlined> | |
<mwc-list-item selected></mwc-list-item> | |
<mwc-list-item value="apple">Apple</mwc-list-item> | |
<mwc-list-item value="banana">Banana</mwc-list-item> | |
<mwc-list-item value="coconut">Coconut</mwc-list-item> | |
<mwc-list-item value="durian">Durian</mwc-list-item> | |
</my-select> | |
</td> | |
</tr> | |
</table> | |
<mwc-dialog> | |
`; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"files": { | |
"simple-greeting.ts": { | |
"position": 0 | |
}, | |
"index.html": { | |
"position": 1 | |
}, | |
"package.json": { | |
"position": 2, | |
"hidden": true | |
}, | |
"my-select.ts": { | |
"position": 3 | |
}, | |
"my-menu.ts": { | |
"position": 4 | |
}, | |
"my-menu-surface.ts": { | |
"position": 5 | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment