diff --git a/package.json b/package.json index 0f58e1c..c769080 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@tp/tp-checkbox", - "version": "1.0.9", + "version": "1.1.0", "description": "", "main": "tp-checkbox.js", "scripts": { diff --git a/tp-checkbox.js b/tp-checkbox.js index 1dedede..73a1284 100644 --- a/tp-checkbox.js +++ b/tp-checkbox.js @@ -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);