From 280cb7f2b15723f9a1b9e9ad954d3ee8ce60b262 Mon Sep 17 00:00:00 2001
From: Sven Geusens <sge@umbraco.dk>
Date: Fri, 7 Feb 2025 07:00:34 +0100
Subject: [PATCH] Fix issues in newly added buttongroup localization (#18254)

* Fix #18253 nullref exception

* Fix #18239 by listening to broader scope changes
---
 .../buttons/umbbuttongroup.directive.js       | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbbuttongroup.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbbuttongroup.directive.js
index 8c7836a2e6..2a526ae2af 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbbuttongroup.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbbuttongroup.directive.js
@@ -90,9 +90,7 @@ Use this directive to render a button with a dropdown of alternative actions.
 **/
 (function () {
   'use strict';
-
   function ButtonGroupDirective() {
-
     function controller($scope, localizationService) {
       $scope.toggleStyle = null;
       $scope.blockElement = false;
@@ -125,18 +123,24 @@ Use this directive to render a button with a dropdown of alternative actions.
       // As the <localize /> directive doesn't support Angular expressions as fallback, we instead listen for changes
       // to the label key of the default button, and if detected, we update the button label with the localized value
       // received from the localization service
-      $scope.$watch("defaultButton.labelKey", function () {
-        if (!$scope.defaultButton.labelKey) return;
+      $scope.$watch("defaultButton", localizeDefaultButtonLabel);
+      $scope.$watch("defaultButton.labelKey", localizeDefaultButtonLabel);
+
+      function localizeDefaultButtonLabel() {
+        if (!$scope.defaultButton?.labelKey) return;
         localizationService.localize($scope.defaultButton.labelKey).then(value => {
           if (value && value.indexOf("[") === 0) return;
           $scope.defaultButton.label = value;
         });
-      });
+      }
 
       // In a similar way, we must listen for changes to the sub buttons (or their label keys), and if detected, update
       // the label with the localized value received from the localization service
-      $scope.$watch("defaultButton.subButtons", function () {
-        if (!Array.isArray($scope.subButtons)) return;
+      $scope.$watch("subButtons", localizeSubButtons, true);
+      $scope.$watch("defaultButton.subButtons", localizeSubButtons, true);
+
+      function localizeSubButtons() {
+        if (!$scope.subButtons || !Array.isArray($scope.subButtons)) return;
         $scope.subButtons.forEach(function (sub) {
           if (!sub.labelKey) return;
           localizationService.localize(sub.labelKey).then(value => {
@@ -144,7 +148,7 @@ Use this directive to render a button with a dropdown of alternative actions.
             sub.label = value;
           });
         });
-      }, true);
+      }
 
     }