diff --git a/addons/web_editor/static/src/js/editor/snippets.editor.js b/addons/web_editor/static/src/js/editor/snippets.editor.js
index 525bb568eea..65b3fb26a97 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/addons/web_editor/static/src/js/editor/snippets.editor.js
@@ -1061,14 +1061,17 @@ var SnippetEditor = Widget.extend({
      * @param {Event} ev
      */
     _onUserValueWidgetRequest: function (ev) {
-        ev.stopPropagation();
         for (const key of Object.keys(this.styles)) {
             const widget = this.styles[key].findWidget(ev.data.name);
             if (widget) {
+                ev.stopPropagation();
                 ev.data.onSuccess(widget);
                 return;
             }
         }
+        if (!ev.data.allowParentOption) {
+            ev.stopPropagation();
+        }
     },
     /**
      * Called when the 'mouse wheel' is used when hovering over the overlay.
diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js
index e05cd78553b..7abb8c2a851 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -3364,7 +3364,7 @@ const SnippetOptionWidget = Widget.extend({
                         depName = depName.substr(1);
                     }
 
-                    const widget = this._requestUserValueWidgets(depName)[0];
+                    const widget = this._requestUserValueWidgets(depName, true)[0];
                     if (widget) {
                         dependenciesData.push({
                             widget: widget,
@@ -3719,15 +3719,25 @@ const SnippetOptionWidget = Widget.extend({
     /**
      * @private
      * @param {...string} widgetNames
+     * @param {boolean} [allowParentOption=false]
      * @returns {UserValueWidget[]}
      */
-    _requestUserValueWidgets: function (...widgetNames) {
+    _requestUserValueWidgets: function (...args) {
+        const widgetNames = args;
+        let allowParentOption = false;
+        const lastArg = args[args.length - 1];
+        if (typeof lastArg === 'boolean') {
+            widgetNames.pop();
+            allowParentOption = lastArg;
+        }
+
         const widgets = [];
         for (const widgetName of widgetNames) {
             let widget = null;
             this.trigger_up('user_value_widget_request', {
                 name: widgetName,
                 onSuccess: _widget => widget = _widget,
+                allowParentOption: allowParentOption,
             });
             if (widget) {
                 widgets.push(widget);
diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index 95d77de6824..01a22ed64c3 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -2686,11 +2686,7 @@ options.registry.CoverProperties = options.Class.extend({
         this.$target[0].dataset.coverClass = coverClass;
         this.$target[0].dataset.textAlignClass = this.$el.find('[data-cover-opt-name="text_align"] we-button.active').data('selectClass') || '';
         this.$target[0].dataset.filterValue = this.$filterValueOpts.filter('.active').data('filterValue') || 0.0;
-        let colorPickerWidget = null;
-        this.trigger_up('user_value_widget_request', {
-            name: 'bg_color_opt',
-            onSuccess: _widget => colorPickerWidget = _widget,
-        });
+        const colorPickerWidget = this._requestUserValueWidgets('bg_color_opt')[0];
         // TODO there is probably a better way and this should be refactored to
         // use more standard colorpicker+imagepicker structure
         const ccValue = colorPickerWidget._ccValue;