Not possible to triple click when checklist is the next block

[churichard]

Description
When a checklist item is the block on the next line, it's not possible to triple click to select text. The selection immediately disappears.

It's still possible to select text by clicking and dragging, or by triple clicking to the right of the block. You just can't do it in the middle of the text.

Recording
https://user-images.githubusercontent.com/4218237/133506943-58814de9-40d5-4a25-b618-475f43e687e5.mp4

I'm triple clicking and most of the time, the selection flashes and then disappears.

Sandbox
https://www.slatejs.org/examples/check-lists

Steps
To reproduce the behavior:

1. Go to https://www.slatejs.org/examples/check-lists
2. Try to triple click the first block and observe that the selection does not stay highlighted

Expectation
You should be able to triple click and have the selection be highlighted

Environment

• Slate Version: 0.66.1
• Operating System: Windows
• Browser: Chrome

Additional context
For a reference implementation that works better than Slate's implementation, check out the way Plate does it: https://github.com/udecode/plate/blob/89232685952dbfa1dca6f8240d9021e005f15c42/packages/elements/list-ui/src/TodoListElement/TodoListElement.tsx

I'm not sure if there is a bug in Slate that makes it so Slate's implementation doesn't work, but Plate works around it by adjusting how checklists are rendered.

[dylans]

This sounds like a consequence of the changes in #4455 and #4498

[jamfromouterspace]

Since this doesn't happen on bullet lists, I fixed it by rendering my checklists like this:

  switch (element.type) {
    case "check-list-item":
      return (
        <li
          {...attributes}
          className={css`
            list-style: none;
          `}
        >
          <input
            type="checkbox"
            contentEditable={false}
            checked={element.checked}
            onChange={(event) => {
              const path = ReactEditor.findPath(editor, element)
              const newProperties = {
                checked: event.target.checked,
              }
              Transforms.setNodes(editor, newProperties, { at: path })
            }}
          />
          {children}
        </li>
      )
    case "bulleted-list":
      return <li {...attributes}>{children}</li>
   ...

Make sure contentEditable is false in the input.

Edit: Okay, it looks like this still works when you use a div instead of an li. Maybe something about nesting another div inside (as is the case in the example code and even in Plate) throws off the triple-click detection mentioned in the PRs above.