Do not allow editing read-only properties by clicking their labels (#…

…18152) * Do not allow editing read-only properties by clicking their labels * Simplify the fix :) * Fix linting issue
umbraco · Jan 29, 2025 · 59a4649 · 59a4649
1 parent f54b603
commit 59a4649
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 8 deletions.
diff --git a/...raco.Web.UI.Client/src/common/directives/components/content/umbtabbedcontent.directive.js b/...raco.Web.UI.Client/src/common/directives/components/content/umbtabbedcontent.directive.js
@@ -218,6 +218,10 @@
 
                 return !canEditCulture || !canEditSegment;
             }
+
+            $scope.isPreview = function(property) {
+              return ((property.readonly || !$scope.allowUpdate) && !property.supportsReadOnly) || ($scope.propertyEditorDisabled(property) && $scope.allowUpdate);
+            }
         }
 
         var directive = {

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbproperty.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbproperty.directive.js
@@ -25,11 +25,12 @@
                 propertyAlias: "@",
                 showInherit: "<",
                 inheritsFrom: "<",
-                hideLabel: "<?"
+                hideLabel: "<?",
+                preview: "<?"
             }
         });
 
-    
+
 
     function UmbPropertyController($scope, userService, serverValidationManager, udiService, angularHelper) {
 
@@ -55,7 +56,7 @@
         // returns the validation path for the property to be used as the validation key for server side validation logic
         vm.getValidationPath = function () {
 
-            var parentValidationPath = vm.parentUmbProperty ? vm.parentUmbProperty.getValidationPath() : null;            
+            var parentValidationPath = vm.parentUmbProperty ? vm.parentUmbProperty.getValidationPath() : null;
             var propAlias = vm.propertyAlias ? vm.propertyAlias : vm.property.alias;
             // the elementKey will be empty when this is not a nested property
             var valPath = vm.elementKey ? vm.elementKey + "/" + propAlias : propAlias;

diff --git a/src/Umbraco.Web.UI.Client/src/views/components/content/umb-tabbed-content.html b/src/Umbraco.Web.UI.Client/src/views/components/content/umb-tabbed-content.html
@@ -15,12 +15,13 @@
                     property="property"
                     node="contentNodeModel"
                     show-inherit="contentNodeModel.variants.length > 1 && property.variation !== 'CultureAndSegment'"
-                    inherits-from="defaultVariant.displayName">
+                    inherits-from="defaultVariant.displayName"
+                    preview="isPreview(property)">
 
                     <umb-property-editor
                         model="property"
                         node="contentNodeModel"
-                        preview="((property.readonly || !allowUpdate) && !property.supportsReadOnly) || (propertyEditorDisabled(property) && allowUpdate)"
+                        preview="isPreview(property)"
                         allow-unlock="!property.readonly && allowUpdate && allowEditInvariantFromNonDefault"
                         on-unlock="unlockInvariantValue(property)"
                         ng-attr-readonly="{{property.readonly || !allowUpdate || undefined}}">
@@ -49,12 +50,13 @@
                     property="property"
                     node="contentNodeModel"
                     show-inherit="contentNodeModel.variants.length > 1 && property.variation !== 'CultureAndSegment'"
-                    inherits-from="defaultVariant.displayName">
+                    inherits-from="defaultVariant.displayName"
+                    preview="isPreview(property)">
 
                     <umb-property-editor
                         model="property"
                         node="contentNodeModel"
-                        preview="((property.readonly || !allowUpdate) && !property.supportsReadOnly) || (propertyEditorDisabled(property) && allowUpdate)"
+                        preview="isPreview(property)"
                         allow-unlock="!property.readonly && allowUpdate && allowEditInvariantFromNonDefault"
                         on-unlock="unlockInvariantValue(property)"
                         ng-attr-readonly="{{property.readonly || !allowUpdate || undefined}}">

diff --git a/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property.html b/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property.html
@@ -9,7 +9,7 @@
 
                 <div class="control-header" ng-hide="(vm.hideLabel || vm.property.hideLabel) === true">
 
-                    <label data-element="property-label-{{vm.property.alias}}" class="control-label" for="{{vm.property.alias}}" ng-attr-title="{{vm.controlLabelTitle}}" aria-label="Property alias: {{vm.controlAriaLabel}}">{{vm.property.label}}<span ng-if="vm.property.validation.mandatory || vm.property.ncMandatory"><strong class="umb-control-required">*</strong></span></label>
+                    <label data-element="property-label-{{vm.property.alias}}" class="control-label" for="{{vm.preview ? undefined : vm.property.alias}}" ng-attr-title="{{vm.controlLabelTitle}}" aria-label="Property alias: {{vm.controlAriaLabel}}">{{vm.property.label}}<span ng-if="vm.property.validation.mandatory || vm.property.ncMandatory"><strong class="umb-control-required">*</strong></span></label>
 
                     <umb-property-actions actions="vm.propertyActions"></umb-property-actions>