Index list items within their parent list

Co-authored-by: Mu-An Chiou <muan@github.com>

Author: dgraham

examples/index.html

@@ -34,6 +34,21 @@
               WALL-E
             </label>
           </li>
+          <li class="task-list-item">
+            <label>
+              <input type="checkbox" class="task-list-item-checkbox">
+              R2-D2
+            </label>
+
+            <ul class="contains-task-list">
+              <li class="task-list-item">
+                <label>
+                  <input type="checkbox" class="task-list-item-checkbox">
+                  Baymax
+                </label>
+              </li>
+            </ul>
+          </li>
           <li class="task-list-item">
             <label>
               <input type="checkbox" class="task-list-item-checkbox">

src/task-lists-element.js

@@ -136,12 +136,10 @@ function onListItemMouseOut(event: MouseEvent) {
 }
 
 // Returns the list item position as a (list index, item index) tuple.
-// Listen on top-level task lists because item indexing includes nested task lists.
-function position(el: Element): [number, number] {
-  const list = rootTaskList(el)
+function position(checkbox: HTMLInputElement): [number, number] {
+  const list = taskList(checkbox)
   if (!list) throw new Error('.contains-task-list not found')
-  const flattened = Array.from(list.querySelectorAll('li'))
-  const index = flattened.indexOf(el.closest('.task-list-item'))
+  const index = Array.from(list.children).indexOf(checkbox.closest('.task-list-item'))
   return [listIndex(list), index]
 }
 

test/test.js

@@ -34,15 +34,29 @@ describe('task-lists element', function() {
               <input id="wall-e" type="checkbox" class="task-list-item-checkbox"> WALL-E
             </li>
           </ul>
-          <ul>
+
+          <ol>
             <li>
+              Nested
               <ul class="contains-task-list">
                 <li class="task-list-item">
-                  <input id="baymax" type="checkbox" class="task-list-item-checkbox"> Baymax
+                  <label>
+                    <input type="checkbox" class="task-list-item-checkbox">
+                    R2-D2
+                  </label>
+
+                  <ul class="contains-task-list">
+                    <li class="task-list-item">
+                      <label>
+                        <input id="baymax" type="checkbox" class="task-list-item-checkbox">
+                        Baymax
+                      </label>
+                    </li>
+                  </ul>
                 </li>
               </ul>
             </li>
-          </ul>
+          </ol>
         </task-lists>`
       document.body.append(container)
     })
@@ -76,7 +90,7 @@ describe('task-lists element', function() {
       list.addEventListener('task-lists:check', function(event) {
         called = true
         const {position, checked} = event.detail
-        assert.deepEqual(position, [3, 0])
+        assert.deepEqual(position, [4, 0])
         assert(checked)
       })