From f0e40a59e5ee33634e236e2c481aeb4273edd237 Mon Sep 17 00:00:00 2001
From: colemanw <coleman@civicrm.org>
Date: Wed, 22 Jan 2025 16:30:47 -0500
Subject: [PATCH] Improve crmUiIconPicker with ngModel support for binding

Fixes a UI bug in SearchKit:
1. Add an icon to a column from the "Choose Icon..." popup
2. Select "Choose Icon..." again and pick a different icon
3. The icon displayed does not change
---
 ang/crmUi.js | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/ang/crmUi.js b/ang/crmUi.js
index 3035d1756dd4..3a52a9502ea0 100644
--- a/ang/crmUi.js
+++ b/ang/crmUi.js
@@ -1294,10 +1294,21 @@
     .directive('crmUiIconPicker', function($timeout) {
       return {
         restrict: 'A',
-        controller: function($element) {
+        require: '?ngModel', // Soft require ngModel
+        controller: function($element, $scope, $attrs) {
           CRM.loadScript(CRM.config.resourceBase + 'js/jquery/jquery.crmIconPicker.js').then(function() {
             $timeout(function() {
               $element.crmIconPicker();
+
+              // If ngModel is present, set up two-way binding
+              if ($attrs.ngModel) {
+                $scope.$watch($attrs.ngModel, function(newValue) {
+                  if (newValue !== undefined) {
+                    // Update the value in the picker
+                    $element.val(newValue).trigger('change');
+                  }
+                });
+              }
             });
           });
         }