Toggle on enter or space key

This commit is contained in:
2025-09-29 11:27:15 +02:00
parent 038a1f4cf8
commit e3ea10ff20
2 changed files with 20 additions and 1 deletions

View File

@@ -1,6 +1,6 @@
{
"name": "@tp/tp-checkbox",
"version": "1.0.9",
"version": "1.1.0",
"description": "",
"main": "tp-checkbox.js",
"scripts": {

View File

@@ -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);