Toggle on enter or space key
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@tp/tp-checkbox",
|
||||
"version": "1.0.9",
|
||||
"version": "1.1.0",
|
||||
"description": "",
|
||||
"main": "tp-checkbox.js",
|
||||
"scripts": {
|
||||
|
@@ -87,6 +87,11 @@ class TpCheckbox extends Inert(ControlState(FormElement(LitElement))) {
|
||||
this._value = '';
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
super.disconnectedCallback();
|
||||
this.removeEventListener('keydown', this._keyToggle);
|
||||
}
|
||||
|
||||
firstUpdated() {
|
||||
super.firstUpdated();
|
||||
this.setAttribute('tabindex', '0');
|
||||
@@ -101,6 +106,14 @@ class TpCheckbox extends Inert(ControlState(FormElement(LitElement))) {
|
||||
if (changes.has('checked')) {
|
||||
this.dispatchEvent(new CustomEvent('checked-changed', { detail: this.checked, bubbles: true, composed: true }));
|
||||
}
|
||||
|
||||
if (changes.has('focused')) {
|
||||
if (this.focused) {
|
||||
this.addEventListener('keydown', this._keyToggle);
|
||||
} else {
|
||||
this.removeEventListener('keydown', this._keyToggle);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
validate() {
|
||||
@@ -123,6 +136,12 @@ class TpCheckbox extends Inert(ControlState(FormElement(LitElement))) {
|
||||
set value(val) {
|
||||
this._value = val || '';
|
||||
}
|
||||
|
||||
_keyToggle(e) {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
this.toggle();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.customElements.define('tp-checkbox', TpCheckbox);
|
||||
|
Reference in New Issue
Block a user