Commenting not working on pages with read_only FieldPanels

[mattibo]

Issue Summary

When editing pages with read_only FieldPanels commenting does not work on the whole page.

• No Toggle button is visible

• Error is show in the browser

I guess this is the specific line:

wagtail/client/src/entrypoints/admin/comments.js

Line 22 in fd08d20

if (fieldNode.closest('[data-contentpath-disabled]')) {

At the execution the fieldNode is null.

Steps to Reproduce

For me it can be reproduced in a Page model with following content_panels:

content_panels = [FieldPanel("title", read_only=True, classname="title")]

Technical details

• Python version: Python 3.11.1
• Django version: Django==5.0.4
• Wagtail version: wagtail==6.0.2
• Browser version: Edge 123

[mattibo]

After a litte bit of investigation:

A read only FieldPanel has no field key inside the context:

wagtail/wagtail/admin/panels/field_panel.py

Lines 331 to 342 in fd08d20

	def get_read_only_context_data(self):
	# Define context data for BoundPanel AND read-only output rendering
	context = {
	"id_for_label": self.id_for_label(),
	"help_text_id": "%s-helptext" % self.prefix,
	"help_text": self.help_text,
	"show_add_comment_button": self.comments_enabled,
	"raw_value": self.value_from_instance,
	"display_value": self.panel.format_value_for_display(
	self.value_from_instance
	),
	}

The variable contentpath from the formattedfield tag is empty:

wagtail/wagtail/admin/templatetags/wagtailadmin_tags.py

Line 1205 in 366a2a4

"contentpath": field.name if field else "",

Therefore the tag data-contentpath is not filled:

wagtail/wagtail/admin/templates/wagtailadmin/shared/formatted_field.html

Line 28 in fd08d20

<div class="w-field {{ field_classname }}{% if has_errors %} w-field--error{% endif %}{% if show_add_comment_button %} w-field--commentable{% endif %}" data-field{% if contentpath %} data-contentpath="{{ contentpath }}"{% endif %}>

The FieldLevelCommentWidget wants to build a fieldNode and expects a data-contentpath:

wagtail/client/src/entrypoints/admin/comments.js

Lines 247 to 253 in fd08d20

	function initAddCommentButton(buttonElement) {
	const widget = new FieldLevelCommentWidget({
	fieldNode: buttonElement.closest('[data-contentpath]'),
	commentAdditionNode: buttonElement,
	});
	widget.register();
	}

As a consequence, the fieldNode is null which leads to the error inside the browser from the screenshot above and no commenting is possible.

[rohitsrma]

I can confirm that the issue exists.

When I set read_only=True for any field, I'm not getting option to add comments to any other fields. Also, an error shows up in the console.

After doing some research, I mostly agree with what @mattibo mentioned above. When I changed the context's content_path to "contentpath": field.name if field else "disabled", the problem was fixed. But, I don't think hardcoding a value is the right way to solve this. So, I'm pretty sure the issue comes from the empty string we're using in the else condition. And, it's likely that one of these parts of the comments.js file is causing the problem.

wagtail/client/src/entrypoints/admin/comments.js

Line 22 in b664169

if (fieldNode.closest('[data-contentpath-disabled]')) {

wagtail/client/src/entrypoints/admin/comments.js

Line 249 in b664169

fieldNode: buttonElement.closest('[data-contentpath]'),

@lb-, I'm trying to find out the exact issue, but it would be really helpful if you could take a look too.