Add missing input events
This commit is contained in:
parent
7d6f2591f4
commit
aeef67188c
3 changed files with 26 additions and 10 deletions
|
@ -6,7 +6,7 @@
|
||||||
},
|
},
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"version": "3.0.1",
|
"version": "3.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.d.ts
vendored
17
src/better-select.d.ts
vendored
|
@ -2,6 +2,7 @@ export class BetterSelect extends HTMLElement {
|
||||||
static formAssociated: boolean;
|
static formAssociated: boolean;
|
||||||
static observedAttributes: readonly string[];
|
static observedAttributes: readonly string[];
|
||||||
static styleSheet: CSSStyleSheet;
|
static styleSheet: CSSStyleSheet;
|
||||||
|
static searchHideDisabled: boolean;
|
||||||
/** @type {HTMLElement} */
|
/** @type {HTMLElement} */
|
||||||
display: HTMLElement;
|
display: HTMLElement;
|
||||||
/** @type {HTMLElement} */
|
/** @type {HTMLElement} */
|
||||||
|
@ -18,6 +19,7 @@ export class BetterSelect extends HTMLElement {
|
||||||
loading: HTMLDialogElement;
|
loading: HTMLDialogElement;
|
||||||
options: HTMLCollectionOf<HTMLOptionElement>;
|
options: HTMLCollectionOf<HTMLOptionElement>;
|
||||||
keyboardSearchBuffer: string;
|
keyboardSearchBuffer: string;
|
||||||
|
dispatchInputEvent(): void;
|
||||||
/**
|
/**
|
||||||
* @param {String} key
|
* @param {String} key
|
||||||
*/
|
*/
|
||||||
|
@ -35,18 +37,19 @@ export class BetterSelect extends HTMLElement {
|
||||||
* @param {string} value
|
* @param {string} value
|
||||||
* @param {HTMLElement} item
|
* @param {HTMLElement} item
|
||||||
*/
|
*/
|
||||||
match(value: string, item: HTMLElement): RegExpMatchArray;
|
match(value: string, item: HTMLElement): false | RegExpMatchArray;
|
||||||
connectedCallback(): void;
|
connectedCallback(): void;
|
||||||
mutationCallback(): void;
|
mutationCallback(): void;
|
||||||
/** @param {HTMLElement} option */
|
/** @param {HTMLElement} option */
|
||||||
setOption(option: HTMLElement): void;
|
setOption(option: HTMLElement): void;
|
||||||
/**
|
/**
|
||||||
|
* @param {number} index
|
||||||
* @param {string} value
|
* @param {string} value
|
||||||
* @param {string} state
|
* @param {string} state
|
||||||
*/
|
*/
|
||||||
setValue(value: string, state?: string): void;
|
setValue(index: number, value: string, state?: string): void;
|
||||||
updateClearButton(): void;
|
updateClearButton(): void;
|
||||||
set value(value: any);
|
set value(arg: any);
|
||||||
get value(): any;
|
get value(): any;
|
||||||
get valueText(): any;
|
get valueText(): any;
|
||||||
setOptions(): void;
|
setOptions(): void;
|
||||||
|
@ -61,7 +64,7 @@ export class BetterSelect extends HTMLElement {
|
||||||
/**
|
/**
|
||||||
* @param {String} name
|
* @param {String} name
|
||||||
*/
|
*/
|
||||||
set name(name: string);
|
set name(arg: string);
|
||||||
/**
|
/**
|
||||||
* @return {String}
|
* @return {String}
|
||||||
*/
|
*/
|
||||||
|
@ -71,12 +74,14 @@ export class BetterSelect extends HTMLElement {
|
||||||
/**
|
/**
|
||||||
* @param {Boolean} disabled
|
* @param {Boolean} disabled
|
||||||
*/
|
*/
|
||||||
set disabled(disabled: boolean);
|
set disabled(arg: boolean);
|
||||||
get disabled(): boolean;
|
get disabled(): boolean;
|
||||||
/**
|
/**
|
||||||
* @param {ValidityConstraint} _constraint
|
* @param {ValidityConstraint} _constraint
|
||||||
*/
|
*/
|
||||||
validityMessage(_constraint: ValidityConstraint): string;
|
validityMessage(_constraint: ValidityConstraint): string;
|
||||||
|
next(): void;
|
||||||
|
previous(): void;
|
||||||
setValidity(): boolean;
|
setValidity(): boolean;
|
||||||
checkValidity(): boolean;
|
checkValidity(): boolean;
|
||||||
get validity(): ValidityState;
|
get validity(): ValidityState;
|
||||||
|
@ -85,7 +90,7 @@ export class BetterSelect extends HTMLElement {
|
||||||
/**
|
/**
|
||||||
* @param {Boolean} required
|
* @param {Boolean} required
|
||||||
*/
|
*/
|
||||||
set required(required: boolean);
|
set required(arg: boolean);
|
||||||
get required(): boolean;
|
get required(): boolean;
|
||||||
reportValidity(): boolean;
|
reportValidity(): boolean;
|
||||||
requiredChanged(): void;
|
requiredChanged(): void;
|
||||||
|
|
|
@ -280,7 +280,7 @@ export class BetterSelect extends HTMLElement {
|
||||||
if (item) {
|
if (item) {
|
||||||
if (!item.part.contains("disabled")) {
|
if (!item.part.contains("disabled")) {
|
||||||
this.setOption(item)
|
this.setOption(item)
|
||||||
this.dispatchEvent(new InputEvent("input", {bubbles: true}))
|
this.dispatchInputEvent()
|
||||||
this.close()
|
this.close()
|
||||||
}
|
}
|
||||||
} else if (!this.#states.has("open")) {
|
} else if (!this.#states.has("open")) {
|
||||||
|
@ -318,12 +318,15 @@ export class BetterSelect extends HTMLElement {
|
||||||
event.stopPropagation()
|
event.stopPropagation()
|
||||||
} else if (key == "Delete") {
|
} else if (key == "Delete") {
|
||||||
this.clear()
|
this.clear()
|
||||||
|
this.dispatchInputEvent()
|
||||||
} else if (key == "ArrowDown") {
|
} else if (key == "ArrowDown") {
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
this.next()
|
this.next()
|
||||||
|
this.dispatchInputEvent()
|
||||||
} else if (key == "ArrowUp") {
|
} else if (key == "ArrowUp") {
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
this.previous()
|
this.previous()
|
||||||
|
this.dispatchInputEvent()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
@ -340,6 +343,10 @@ export class BetterSelect extends HTMLElement {
|
||||||
this.setValidity()
|
this.setValidity()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
dispatchInputEvent() {
|
||||||
|
this.dispatchEvent(new InputEvent("input", {bubbles: true}))
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @param {String} key
|
* @param {String} key
|
||||||
*/
|
*/
|
||||||
|
@ -402,7 +409,7 @@ export class BetterSelect extends HTMLElement {
|
||||||
this.addEventListener("keypress", event => {
|
this.addEventListener("keypress", event => {
|
||||||
if (event.key == "Enter") {
|
if (event.key == "Enter") {
|
||||||
this.selectDefault()
|
this.selectDefault()
|
||||||
this.dispatchEvent(new InputEvent("input", {bubbles: true}))
|
this.dispatchInputEvent()
|
||||||
}
|
}
|
||||||
}, {signal})
|
}, {signal})
|
||||||
|
|
||||||
|
@ -482,7 +489,10 @@ export class BetterSelect extends HTMLElement {
|
||||||
* @param {string} state
|
* @param {string} state
|
||||||
*/
|
*/
|
||||||
setValue(index, value, state=value) {
|
setValue(index, value, state=value) {
|
||||||
this.#index = Number(index)
|
if (value)
|
||||||
|
this.#index = Number(index)
|
||||||
|
else
|
||||||
|
this.#index = undefined
|
||||||
|
|
||||||
this.#value = {value, state}
|
this.#value = {value, state}
|
||||||
this.dispatchEvent(new Event("change", {bubbles: true}));
|
this.dispatchEvent(new Event("change", {bubbles: true}));
|
||||||
|
@ -506,6 +516,7 @@ export class BetterSelect extends HTMLElement {
|
||||||
template.nextElementSibling.addEventListener("click", event => {
|
template.nextElementSibling.addEventListener("click", event => {
|
||||||
event.stopPropagation()
|
event.stopPropagation()
|
||||||
this.clear()
|
this.clear()
|
||||||
|
this.dispatchInputEvent()
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue