Add fallback for custom states without prefix
This commit is contained in:
parent
5dc79016c7
commit
765f6fb652
2 changed files with 12 additions and 7 deletions
|
@ -6,7 +6,7 @@
|
||||||
},
|
},
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"version": "2.0.1",
|
"version": "2.0.2",
|
||||||
"url": "https://darkwiiplayer.github.io/BetterSelect/",
|
"url": "https://darkwiiplayer.github.io/BetterSelect/",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"definitions": "tsc src/*.js --declaration --allowJs --emitDeclarationOnly"
|
"definitions": "tsc src/*.js --declaration --allowJs --emitDeclarationOnly"
|
||||||
|
|
|
@ -74,6 +74,7 @@ export class BetterSelect extends HTMLElement {
|
||||||
#value = {}
|
#value = {}
|
||||||
|
|
||||||
#internals = this.attachInternals()
|
#internals = this.attachInternals()
|
||||||
|
#states = /** @type {Set<String>} */(this.#internals.states)
|
||||||
|
|
||||||
static formAssociated = true
|
static formAssociated = true
|
||||||
static observedAttributes = Object.freeze(["placeholder", "search-placeholder", "required"])
|
static observedAttributes = Object.freeze(["placeholder", "search-placeholder", "required"])
|
||||||
|
@ -168,6 +169,10 @@ export class BetterSelect extends HTMLElement {
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
super()
|
super()
|
||||||
|
|
||||||
|
try { this.#states.add("supports-states") }
|
||||||
|
catch { this.#states = new Set() }
|
||||||
|
|
||||||
childObserver.observe(this, {childList: true})
|
childObserver.observe(this, {childList: true})
|
||||||
this.attachShadow({mode: "open"}).innerHTML = `
|
this.attachShadow({mode: "open"}).innerHTML = `
|
||||||
<div id="display" part="display">
|
<div id="display" part="display">
|
||||||
|
@ -206,7 +211,7 @@ export class BetterSelect extends HTMLElement {
|
||||||
this.setOption(item)
|
this.setOption(item)
|
||||||
this.dispatchEvent(new InputEvent("input", {bubbles: true}))
|
this.dispatchEvent(new InputEvent("input", {bubbles: true}))
|
||||||
this.close()
|
this.close()
|
||||||
} else if (!this.#internals.states.has("open")) {
|
} else if (!this.#states.has("open")) {
|
||||||
this.open()
|
this.open()
|
||||||
} else if (this.display.contains(event.target) || this.display.contains(event.target.closest("[slot]")?.assignedSlot)) {
|
} else if (this.display.contains(event.target) || this.display.contains(event.target.closest("[slot]")?.assignedSlot)) {
|
||||||
this.close()
|
this.close()
|
||||||
|
@ -215,7 +220,7 @@ export class BetterSelect extends HTMLElement {
|
||||||
|
|
||||||
this.addEventListener("keydown", event => {
|
this.addEventListener("keydown", event => {
|
||||||
const key = event.key
|
const key = event.key
|
||||||
if (this.#internals.states.has("open")) {
|
if (this.#states.has("open")) {
|
||||||
if (key == " " && this.list.contains(this.shadowRoot.activeElement)) {
|
if (key == " " && this.list.contains(this.shadowRoot.activeElement)) {
|
||||||
this.close()
|
this.close()
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
|
@ -322,13 +327,13 @@ export class BetterSelect extends HTMLElement {
|
||||||
}, {signal})
|
}, {signal})
|
||||||
|
|
||||||
this.dialog.show()
|
this.dialog.show()
|
||||||
this.#internals.states.add("open")
|
this.#states.add("open")
|
||||||
|
|
||||||
if ("populate" in this) {
|
if ("populate" in this) {
|
||||||
this.#internals.states.add("loading")
|
this.#states.add("loading")
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
await this.populate()
|
await this.populate()
|
||||||
this.#internals.states.delete("loading")
|
this.#states.delete("loading")
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -338,7 +343,7 @@ export class BetterSelect extends HTMLElement {
|
||||||
hidden.removeAttribute("hidden")
|
hidden.removeAttribute("hidden")
|
||||||
this.#abortOpen?.abort()
|
this.#abortOpen?.abort()
|
||||||
this.#abortOpen = null
|
this.#abortOpen = null
|
||||||
this.#internals.states.delete("open")
|
this.#states.delete("open")
|
||||||
this.dialog.close()
|
this.dialog.close()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue