Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(checkbox): Add keyboard handling for Enter and Space keys to tog… #946

Merged
merged 6 commits into from
Nov 13, 2024
Next Next commit
feat(checkbox): Add keyboard handling for Enter and Space keys to tog…
…gle checked state
mryunt02 committed Oct 18, 2024
commit 3a22ca056fc2713495ec473227dff9f1e5a483f2
8 changes: 8 additions & 0 deletions src/components/checkbox-group/checkbox/bl-checkbox.ts
Original file line number Diff line number Diff line change
@@ -177,6 +177,13 @@ export default class BlCheckbox extends FormControlMixin(LitElement) {
private handleFieldValueChange = (event: CustomEvent<Array<string>>) => {
this.checked = event.detail.includes(this.value);
};
private handleKeyDown(event: KeyboardEvent) {
if (event.code === "Enter" || event.code === "Space") {
this.checked = !this.checked;
this.onChange(this.checked);
event.preventDefault();
}
}

render(): TemplateResult {
let icon = "";
@@ -206,6 +213,7 @@ export default class BlCheckbox extends FormControlMixin(LitElement) {
aria-readonly=${this.disabled}
.indeterminate=${this.indeterminate}
@change=${this.handleChange}
@keydown=${this.handleKeyDown}
value=${ifDefined(this.value)}
@blur=${this.blur}
/>