[BUGFIX] Colorpicker in irre records

This patch checks if a value is set before writing
a possbile empty value to the field.

Resolves: #83000
Releases: master, 8.7
Change-Id: I3badd9b9ff1a567351d971b5ae0199bf347e0f72
Reviewed-on: https://review.typo3.org/54731


Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Jan Helke <typo3@helke.de>
Reviewed-by: Andreas Fernandez <typo3@scripting-base.de>
Reviewed-by: Oliver Hader <oliver.hader@typo3.org>
Tested-by: Andreas Fernandez <typo3@scripting-base.de>
Reviewed-by: Christian Kuhn <lolli@schwarzbu.ch>
Tested-by: Christian Kuhn <lolli@schwarzbu.ch>
Reviewed-by: Frank Naegler <frank.naegler@typo3.org>
Tested-by: Frank Naegler <frank.naegler@typo3.org>

typo3/sysext/backend/Resources/Private/TypeScript/ColorPicker.ts

@@ -41,12 +41,15 @@ class ColorPicker {
       position: 'bottom left',
       theme: 'bootstrap',
     });
-    $(document).on('change', '.t3js-colorpicker-value-trigger', function(this: HTMLFormElement): void {
-      $(this).closest('.t3js-formengine-field-item')
-             .find('.t3js-color-picker')
-             .val(this.value)
-             .trigger('paste');
-      $(this).val('');
+    $(document).on('change', '.t3js-colorpicker-value-trigger', (event: Event): void => {
+      const $element = $(event.target);
+      if ($element.val() !== '') {
+        $element.closest('.t3js-formengine-field-item')
+          .find('.t3js-color-picker')
+          .val($element.val())
+          .trigger('paste');
+        $element.val('');
+      }
     });
   }
 }

typo3/sysext/backend/Resources/Public/JavaScript/ColorPicker.js

@@ -33,12 +33,15 @@ define(["require", "exports", "jquery", "TYPO3/CMS/Core/Contrib/jquery.minicolor
                 position: 'bottom left',
                 theme: 'bootstrap',
             });
-            $(document).on('change', '.t3js-colorpicker-value-trigger', function () {
-                $(this).closest('.t3js-formengine-field-item')
-                    .find('.t3js-color-picker')
-                    .val(this.value)
-                    .trigger('paste');
-                $(this).val('');
+            $(document).on('change', '.t3js-colorpicker-value-trigger', function (event) {
+                var $element = $(event.target);
+                if ($element.val() !== '') {
+                    $element.closest('.t3js-formengine-field-item')
+                        .find('.t3js-color-picker')
+                        .val($element.val())
+                        .trigger('paste');
+                    $element.val('');
+                }
             });
         };
         return ColorPicker;