Skip to content

fix(TaskItem): use div instead of label element as task item wrapper#8568

Open
mejo- wants to merge 2 commits into
mainfrom
fix/task_item_click
Open

fix(TaskItem): use div instead of label element as task item wrapper#8568
mejo- wants to merge 2 commits into
mainfrom
fix/task_item_click

Conversation

@mejo-
Copy link
Copy Markdown
Member

@mejo- mejo- commented May 11, 2026

📝 Summary

Fixes problems with more than one block node in task items. label elements have special click behaviour: clicking on them fires a second click on the their first "labelable" descendant.

This resulted in weird bugs when having e.g. a code block or image as second block node in a task item.

🏁 Checklist

  • Code is properly formatted (npm run lint / npm run stylelint / composer run cs:check)
  • Sign-off message is added to all commits

@mejo- mejo- self-assigned this May 11, 2026
@mejo- mejo- added bug Something isn't working feature: formatting - lists labels May 11, 2026
@github-project-automation github-project-automation Bot moved this to 🧭 Planning evaluation (don't pick) in 📝 Productivity team May 11, 2026
@mejo-
Copy link
Copy Markdown
Member Author

mejo- commented May 11, 2026

/backport to stable33

@mejo- mejo- moved this from 🧭 Planning evaluation (don't pick) to 🏗️ In progress in 📝 Productivity team May 11, 2026
@mejo- mejo- moved this from 🏗️ In progress to 👀 In review in 📝 Productivity team May 11, 2026
mejo- added 2 commits May 11, 2026 13:13
Signed-off-by: Jonas <jonas@freesources.org>
Fixes problems with more than one block node in task items. `label`
elements have special click behaviour: clicking on them fires a second
click on the their first "labelable" descendant.

This resulted in weird bugs when having e.g. a code block or image as
second block node in a task item.

Fixes: #5225

Signed-off-by: Jonas <jonas@freesources.org>
@mejo- mejo- force-pushed the fix/task_item_click branch from 6a91b76 to 666b36d Compare May 11, 2026 11:13
Comment thread src/nodes/TaskItem.ts
Comment on lines +52 to 63
const checkboxAttributes: {
type: string
class: string
contenteditable: boolean
checked?: true
} = {
type: 'checkbox',
class: '',
contenteditable: false,
}
if (node.attrs.checked) {
checkboxAttributes.checked = true
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think if you have an object that never changes you can get a very precise type annotation with Object.freeze for free:

Suggested change
const checkboxAttributes: Object.freeze({
type: 'checkbox',
class: '',
contenteditable: false,
...( node.attrs.checked ? { checked: true } : {} ),
})

In this case checkboxAttributes.type will not just be a string but the string checkbox and it will be readonly.

@max-nextcloud
Copy link
Copy Markdown
Collaborator

I'm wondering if this has downsides in terms of accessibility. I checked but right now that extra click is not used, right? At least clicking the text of a task item does not (un-)check it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

Status: 👀 In review

Development

Successfully merging this pull request may close these issues.

Not possible to click into list item which also includes an image

2 participants