darkwiiplayer/BetterSelect
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add fallback for custom states without prefix

Browse source
This commit is contained in:
Talia 2025-02-03 12:51:19 +01:00
parent 5dc79016c7
commit 765f6fb652
2 changed files with 12 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -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"

17
src/better-select.js
View file

@ -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()
} }