From 9b99a92dc1bc3a693aa78b1815e23bb938c3b692 Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Tue, 10 Aug 2021 15:49:18 +0300
Subject: [PATCH] fix: emit sl-change from checkbox on user interaction only

fixes #497
---
 src/components/checkbox/checkbox.test.ts | 47 ++++++++++++++++++++++++
 src/components/checkbox/checkbox.ts      |  2 +-
 2 files changed, 48 insertions(+), 1 deletion(-)
 create mode 100644 src/components/checkbox/checkbox.test.ts

diff --git a/src/components/checkbox/checkbox.test.ts b/src/components/checkbox/checkbox.test.ts
new file mode 100644
index 0000000000..416977a46b
--- /dev/null
+++ b/src/components/checkbox/checkbox.test.ts
@@ -0,0 +1,47 @@
+import { expect, fixture, html, oneEvent } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands'
+
+import '../../../dist/shoelace.js';
+import type SlInput from './checkbox';
+
+describe('<sl-checkbox>', () => {
+  it('should be disabled with the disabled attribute', async () => {
+    const el = await fixture(html` <sl-checkbox disabled></sl-checkbox> `);
+    const checkbox = el.shadowRoot?.querySelector('input');
+
+    expect(checkbox.disabled).to.be.true;
+  });
+
+  it('should be valid by default', async () => {
+    const el = (await fixture<SlInput>(html` <sl-checkbox></sl-checkbox> `))
+
+    expect(el.invalid).to.be.false;
+  });
+
+  it('should fire sl-change when clicked', async () => {
+    const el = (await fixture<SlInput>(html` <sl-checkbox></sl-checkbox> `))
+    setTimeout(() => el.shadowRoot?.querySelector('input').click());
+    const event = await oneEvent(el, 'sl-change')
+    expect(event.target).to.equal(el);
+    expect(el.checked).to.be.true;
+  });
+
+  it('should fire sl-change when toggled via keyboard', async () => {
+    const el = (await fixture<SlInput>(html` <sl-checkbox></sl-checkbox> `))
+    const input = el.shadowRoot?.querySelector('input');
+    input.focus();
+    setTimeout(() => sendKeys({ press: ' ' }));
+    const event = await oneEvent(el, 'sl-change')
+    expect(event.target).to.equal(el);
+    expect(el.checked).to.be.true;
+  });
+
+  it('should not fire sl-change when checked is set by javascript', async () => {
+    const el = (await fixture<SlInput>(html` <sl-checkbox></sl-checkbox> `))
+    el.addEventListener('sl-change', () => expect.fail('event fired'))
+    el.checked = true;
+    await el.updateComplete;
+    el.checked = false;
+    await el.updateComplete;
+  });
+});
diff --git a/src/components/checkbox/checkbox.ts b/src/components/checkbox/checkbox.ts
index 70694f6b76..44e5ea7111 100644
--- a/src/components/checkbox/checkbox.ts
+++ b/src/components/checkbox/checkbox.ts
@@ -90,6 +90,7 @@ export default class SlCheckbox extends LitElement {
   handleClick() {
     this.checked = !this.checked;
     this.indeterminate = false;
+    emit(this, 'sl-change');
   }
 
   handleBlur() {
@@ -121,7 +122,6 @@ export default class SlCheckbox extends LitElement {
   @watch('indeterminate', { waitUntilFirstUpdate: true })
   handleStateChange() {
     this.invalid = !this.input.checkValidity();
-    emit(this, 'sl-change');
   }
 
   render() {