Checklist: unable to tick/untick check boxes on Chrome Mobile

[dmarcelino]

Hi, this issue was originally detected and discussed at #759 (comment). When using Chrome Mobile and trying to tick or untick a check box, the box returns to the previous state.

Steps for Reproduction

1. Visit https://codepen.io/anon/pen/JLdyQq on Chrome Mobile (or Chrome Desktop with inspect)
2. Add a checklist with a few check boxes
3. Tick / untick checkboxes

Expected behavior: For the checkbox to become ticked / unticked

Actual behavior: The checkbox returns to previous state

Platforms: Chrome Mobile

Version: v1.3.5

Investigation: This issue happens because both touchstart and mousedown are being fired, see list.js#L77-L78 and #759 (comment) for more details.

[volser]

I'm also experiencing issues of clicking checkboxes on android devices

[Triangel-ya]

if I want to change the text on the chrome moblie, I can not select the word, because I use e.preventDefault()

[schollz]

I love this feature. I'm still experiencing this too, does anyone have workarounds?

[akhilaudable]

+1

[koenvg]

Hey, if anyone is looking for a workaround. This is how I solved it.

const List = Quill.import("formats/list");

class BetterList extends List {
  constructor(el: HTMLElement) {
    super(el);

    const isCheckList = el.hasAttribute("data-checked");
    el.addEventListener("touchstart", (e) => {
      if (!isCheckList) {
        return;
      }
      e.preventDefault();
    });
  }
}

Quill.register("formats/lists", BetterList);

[quill-bot]

Quill 2.0 has been released (announcement post) with many changes and fixes. If this is still an issue please create a new issue after reviewing our updated Contributing guide 🙏