ENGCOM-6467: Set empty value to color picker when input is reset to update preview #26044

Author: VladimirZaets

app/code/Magento/Ui/view/base/web/js/lib/knockout/bindings/color-picker.js

@@ -71,6 +71,11 @@ define([
         update: function (element, valueAccessor, allBindings, viewModel) {
             var config = valueAccessor();
 
+            /** Initialise value as empty if it is undefined when color picker input is reset **/
+            if (config.value() === undefined) {
+                config.value('');
+            }
+
             if (tinycolor(config.value()).isValid() || config.value() === '') {
                 $(element).spectrum('set', config.value());
 

dev/tests/js/jasmine/tests/app/code/Magento/Ui/base/js/lib/ko/bind/color-picker.test.js

@@ -85,5 +85,28 @@ define([
 
             expect($.fn.init).toHaveBeenCalledWith($input, undefined);
         });
+
+        it('Verify config value is empty when reset colorpicker intput', function () {
+            var value = {
+                    configStuffInHere: true,
+                    value: jasmine.createSpy().and.returnValue(undefined)
+                },
+                valueAccessor = jasmine.createSpy().and.returnValue(value),
+                viewModel = {
+                    disabled: jasmine.createSpy().and.returnValue(false)
+                };
+
+            $.fn.spectrum = jasmine.createSpy();
+            $input = jasmine.createSpy();
+
+            ko.bindingHandlers.colorPicker.update($input, valueAccessor, null, viewModel);
+            expect($.fn.spectrum).toHaveBeenCalledTimes(1);
+            expect(valueAccessor().value).toHaveBeenCalledTimes(4);
+
+            value.value = jasmine.createSpy().and.returnValue('');
+            ko.bindingHandlers.colorPicker.update($input, valueAccessor, null, viewModel);
+            expect($.fn.spectrum).toHaveBeenCalledTimes(3);
+            expect(valueAccessor().value).toHaveBeenCalledTimes(5);
+        });
     });
 });