Merge pull request #18 from github/shiftkey

muan · web-flow · commit 505e58e03310 · 2020-05-27T16:59:37.000-04:00
Ensure shift+click behavior works on label
diff --git a/examples/index.html b/examples/index.html
@@ -5,7 +5,7 @@
   <title>check-all demo</title>
 </head>
 <body>
-  <div data-check-all-container>
+  <div data-check-all-container style="user-select: none; -webkit-user-select: none;">
     Count: <span data-check-all-count>0</span>
     <label><input type="checkbox" data-check-all> Check All</label>
     <label><input type="checkbox" data-check-all-item> github/fetch</label>
diff --git a/src/index.ts b/src/index.ts
@@ -58,7 +58,8 @@ export default function subscribe(container: HTMLElement): Subscription {
 
   function onMouseDown(event: MouseEvent): void {
     if (!(event.target instanceof Element)) return
-    if (event.target.hasAttribute('data-check-all-item')) {
+    const target = event.target instanceof HTMLLabelElement ? event.target.control || event.target : event.target
+    if (target.hasAttribute('data-check-all-item')) {
       shiftKey = event.shiftKey
     }
   }
diff --git a/test/test.js b/test/test.js
@@ -41,6 +41,25 @@ describe('check-all', function () {
   })
 
   it('checks range', function () {
+    const checkAll = document.querySelector('[data-check-all]')
+    const count = document.querySelector('[data-check-all-count]')
+    const checkboxes = document.querySelectorAll('[data-check-all-item]')
+    checkboxes[1].dispatchEvent(new MouseEvent('click'))
+    assert.equal(count.textContent, '1')
+    assert.equal(document.querySelectorAll('[data-check-all-item]:checked').length, 1)
+    assert(checkAll.indeterminate)
+
+    checkboxes[3].dispatchEvent(new MouseEvent('mousedown', {shiftKey: true, bubbles: true}))
+    checkboxes[3].dispatchEvent(new MouseEvent('click', {shiftKey: true, bubbles: true}))
+    assert.equal(count.textContent, '3')
+    assert.notOk(checkboxes[0].checked)
+    assert(checkboxes[1].checked)
+    assert(checkboxes[2].checked)
+    assert(checkboxes[3].checked)
+    assert(checkAll.indeterminate)
+  })
+
+  it('checks range with label click', function () {
     const checkAll = document.querySelector('[data-check-all]')
     const count = document.querySelector('[data-check-all-count]')
     const checkboxes = document.querySelectorAll('[data-check-all-item]')
@@ -49,11 +68,9 @@ describe('check-all', function () {
     assert.equal(document.querySelectorAll('[data-check-all-item]:checked').length, 1)
     assert(checkAll.indeterminate)
 
-    const event = document.createEvent('Events')
-    event.initEvent('mousedown', true, true)
-    event.shiftKey = true
-    checkboxes[3].dispatchEvent(event)
-    checkboxes[3].click()
+    const label = checkboxes[3].closest('label')
+    label.dispatchEvent(new MouseEvent('mousedown', {shiftKey: true, bubbles: true}))
+    label.dispatchEvent(new MouseEvent('click', {shiftKey: true, bubbles: true}))
     assert.equal(count.textContent, '3')
     assert.notOk(checkboxes[0].checked)
     assert(checkboxes[1].checked)

Original file line number	Diff line number	Diff line change
`@@ -58,7 +58,8 @@ export default function subscribe(container: HTMLElement): Subscription {`
`58`	`58`
`59`	`59`	`function onMouseDown(event: MouseEvent): void {`
`60`	`60`	`if (!(event.target instanceof Element)) return`
`61`		`- if (event.target.hasAttribute('data-check-all-item')) {`
	`61`	`+ const target = event.target instanceof HTMLLabelElement ? event.target.control \|\| event.target : event.target`
	`62`	`+ if (target.hasAttribute('data-check-all-item')) {`
`62`	`63`	`shiftKey = event.shiftKey`
`63`	`64`	`}`
`64`	`65`	`}`