Fix checkboxes in Markdown tables

app/assets/javascripts/task_list.js

@@ -40,20 +40,37 @@ export default class TaskList {
       taskListField.value = taskListField.dataset.value;
     });
 
-    $(this.taskListContainerSelector).taskList('enable');
-    $(document).on('tasklist:changed', this.taskListContainerSelector, this.updateHandler);
+    this.enable();
   }
 
   getTaskListTarget(e) {
     return e && e.currentTarget ? $(e.currentTarget) : $(this.taskListContainerSelector);
   }
 
+  // Disable any task items that don't have a data-sourcepos attribute, on the
+  // assumption that if it doesn't then it wasn't generated from our markdown parser.
+  // This covers the case of markdown not being able to handle task lists inside
+  // markdown tables. It also includes hand coded HTML lists.
+  disableNonMarkdownTaskListItems(e) {
+    this.getTaskListTarget(e)
+      .find('.task-list-item')
+      .not('[data-sourcepos]')
+      .find('.task-list-item-checkbox')
+      .prop('disabled', true);
+  }
+
   disableTaskListItems(e) {
     this.getTaskListTarget(e).taskList('disable');
   }
 
   enableTaskListItems(e) {
     this.getTaskListTarget(e).taskList('enable');
+    this.disableNonMarkdownTaskListItems(e);
+  }
+
+  enable() {
+    this.enableTaskListItems();
+    $(document).on('tasklist:changed', this.taskListContainerSelector, this.updateHandler);
   }
 
   disable() {

changelogs/unreleased/bw-table-task-list.yml

+---
+title: Disable unsupported task items in Markdown tables
+merge_request: 46060
+author:
+type: fixed

spec/frontend/task_list_spec.js

@@ -16,7 +16,20 @@ describe('TaskList', () => {
   beforeEach(() => {
     setFixtures(`
       <div class="task-list">
-        <div class="js-task-list-container"></div>
+        <div class="js-task-list-container">
+          <ul data-sourcepos="5:1-5:11" class="task-list" dir="auto">
+            <li data-sourcepos="5:1-5:11" class="task-list-item enabled">
+              <input type="checkbox" class="task-list-item-checkbox" checked=""> markdown task
+            </li>
+          </ul>
+
+          <ul class="task-list" dir="auto">
+            <li class="task-list-item enabled">
+              <input type="checkbox" class="task-list-item-checkbox"> hand-coded checkbox
+            </li>
+          </ul>
+          <textarea class="hidden js-task-list-field"></textarea>
+        </div>
       </div>
     `);
 
@@ -59,32 +72,47 @@ describe('TaskList', () => {
 
   describe('disableTaskListItems', () => {
     it('should call taskList method with disable param', () => {
-      jest.spyOn($.prototype, 'taskList').mockImplementation(() => {});
+      taskList.disableTaskListItems();
 
-      taskList.disableTaskListItems({ currentTarget });
-
-      expect(currentTarget.taskList).toHaveBeenCalledWith('disable');
+      expect(document.querySelectorAll('.task-list-item input:disabled').length).toEqual(2);
     });
   });
 
   describe('enableTaskListItems', () => {
-    it('should call taskList method with enable param', () => {
-      jest.spyOn($.prototype, 'taskList').mockImplementation(() => {});
+    it('should enable markdown tasks and disable non-markdown tasks', () => {
+      taskList.disableTaskListItems();
+      taskList.enableTaskListItems();
+
+      expect(document.querySelectorAll('.task-list-item input:enabled').length).toEqual(1);
+      expect(document.querySelectorAll('.task-list-item input:disabled').length).toEqual(1);
+    });
+  });
+
+  describe('enable', () => {
+    it('should enable task list items and on document event', () => {
+      jest.spyOn($.prototype, 'on').mockImplementation(() => {});
+
+      taskList.enable();
 
-      taskList.enableTaskListItems({ currentTarget });
+      expect(document.querySelectorAll('.task-list-item input:enabled').length).toEqual(1);
+      expect(document.querySelectorAll('.task-list-item input:disabled').length).toEqual(1);
 
-      expect(currentTarget.taskList).toHaveBeenCalledWith('enable');
+      expect($(document).on).toHaveBeenCalledWith(
+        'tasklist:changed',
+        taskList.taskListContainerSelector,
+        taskList.updateHandler,
+      );
     });
   });
 
   describe('disable', () => {
     it('should disable task list items and off document event', () => {
-      jest.spyOn(taskList, 'disableTaskListItems').mockImplementation(() => {});
       jest.spyOn($.prototype, 'off').mockImplementation(() => {});
 
       taskList.disable();
 
-      expect(taskList.disableTaskListItems).toHaveBeenCalled();
+      expect(document.querySelectorAll('.task-list-item input:disabled').length).toEqual(2);
+
       expect($(document).off).toHaveBeenCalledWith(
         'tasklist:changed',
         taskList.taskListContainerSelector,