Add proper readonly support to default Umbraco editors

[ronaldbarendse]

Support for readonly editors in Umbraco is currently implemented in a very generic way by using pointer-events: none; CSS styling on the property in the backoffice UI. This is used to disable properties on non-default cultures when editing culture variant content nodes (when you see Inherited from {default language} above the property label).

PR #11730 ensures this is now also applied when you set a property to readonly using the EditorModelEventManager events/notifications.

Because it's still possible to move focus to editor inputs by clicking the label or tabbing into them, the current solution is merely a generic quick-fix. To properly support readonly editors, this needs to be implemented separately for each editor type. Some might just require adding disabled="model.readonly", but more complex ones will probably require additional changes.

I've retrieved the list of default editors on a clean Umbraco 9.3 install, so this can be used to track the process of checking/implementing proper readonly support:

Alias	Name	Supports readonly	Notes
Umbraco.BlockList	Block List	❌
Umbraco.CheckBoxList	Checkbox list	❌
Umbraco.ColorPicker	Color Picker	❌
Umbraco.ContentPicker	Content Picker	❌
Umbraco.DateTime	Date/Time	❌
Umbraco.Decimal	Decimal	❌
Umbraco.DropDown.Flexible	Dropdown	❌
Umbraco.EmailAddress	Email address	❌
Umbraco.ColorPicker.EyeDropper	Eye Dropper Color Picker	❌
Umbraco.UploadField	File upload	❌
UmbracoForms.FormPicker	Form Picker	❌
UmbracoForms.ThemePicker	Forms Theme Picker	❌
Umbraco.Grid	Grid layout	❌
Umbraco.ImageCropper	Image Cropper	❌
Umbraco.Label	Label	❌
Umbraco.ListView	List view	❌
Umbraco.MarkdownEditor	Markdown editor	❌
Umbraco.MediaPicker3	Media Picker	❌
Umbraco.MediaPicker	Media Picker (legacy)	❌
Umbraco.MemberGroupPicker	Member Group Picker	❌
Umbraco.MemberPicker	Member Picker	❌
Umbraco.MultiUrlPicker	Multi URL Picker	❌
Umbraco.MultiNodeTreePicker	Multinode Treepicker	❌
Umbraco.NestedContent	Nested Content	❌
Umbraco.Integer	Numeric	❌
Umbraco.RadioButtonList	Radio button list	❌
Umbraco.MultipleTextstring	Repeatable textstrings	❌
Umbraco.TinyMCE	Rich Text Editor	❌
Umbraco.Slider	Slider	❌
Umbraco.Tags	Tags	❌
Umbraco.TextArea	Textarea	❌
Umbraco.TextBox	Textbox	❌
Umbraco.TrueFalse	Toggle	✔️	Part of PR #11587 (8.18.0 and 9.2.0)
Umbraco.UserPicker	User Picker	❌

[bjarnef]

Regarding the "readonly" toggle at Inherited from {default language} it is actually possible to toggle this anyway via the property label:
#9676

It would be useful if most property editors / components was able to configurate as readonly or disabled.

Sometimes we need to import data, where we would like to use a core property editor, which admin can manage, but not content editors. We have solved this either just using a label property, hiding the specific properties / group / tab hooking into SendingContentModel event or using a custom property editor. Some of the core components already have a disabled property.

Depending on the property editor disabled and readonly is not the same thing though, e.g. a text input with readonly attribute get focus, but with disabled attribute it isn't focused when navigating via keyboard.

[ronaldbarendse]

Correct, both #9676 and #9783 are the result of using the generic quick fix of disabling user input by only adding pointer-events: none; styling...

This still allows focusing/activating the editors in different ways, like labels that are bound to a form element or tabbing to it. We could add additional quick fixes for this by removing the label for attribute when it's readonly and adding tabindex="-1", but that would indeed completely disable any user interaction, including selecting text from a readonly input 😞