diff --git a/typo3/sysext/backend/Resources/Private/TypeScript/ColorPicker.ts b/typo3/sysext/backend/Resources/Private/TypeScript/ColorPicker.ts
index afc9d2d39124f1c0bc47f153d8dd84bb29df349e..b5370c75cd408bf60f1849ba9c297e804aff3952 100644
--- a/typo3/sysext/backend/Resources/Private/TypeScript/ColorPicker.ts
+++ b/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('');
+      }
     });
   }
 }
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/ColorPicker.js b/typo3/sysext/backend/Resources/Public/JavaScript/ColorPicker.js
index d676d051813fc44e14690282e70f3419b66e76fe..6f027e83fe1b0610d0b462dc940303562951b473 100644
--- a/typo3/sysext/backend/Resources/Public/JavaScript/ColorPicker.js
+++ b/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;