[MERGE] forward port branch saas-12.1 up to 6878c9f3424

1 files changed, 22 insertions, 6 deletions

diff --git a/addons/web_editor/static/src/js/wysiwyg_snippets/snippets.options.js b/addons/web_editor/static/src/js/wysiwyg_snippets/snippets.options.js
index 0d2bd5a6e79..2f009feb075 100644
--- a/addons/web_editor/static/src/js/wysiwyg_snippets/snippets.options.js
+++ b/addons/web_editor/static/src/js/wysiwyg_snippets/snippets.options.js
@@ -132,7 +132,7 @@ var SnippetOption = Widget.extend({
      * @param {jQuery} $opt - the related DOMElement option
      */
     selectClass: function (previewMode, value, $opt) {
-        var $group = $opt && $opt.closest('.dropdown-submenu');
+        var $group = $opt && $opt.parents('.dropdown-submenu').last();
         if (!$group || !$group.length) {
             $group = this.$el;
         }
@@ -295,13 +295,29 @@ var SnippetOption = Widget.extend({
             })
             .addClass('active');
 
-        _processSelectClassElements(this.$el);
+        // Get submenus which are not inside submenus
+        var $submenus = this.$el.find('.dropdown-submenu')
+            .addBack('.dropdown-submenu')
+            .not('.dropdown-submenu .dropdown-submenu');
 
-        function _processSelectClassElements($el) {
+        // Add unique active class for each submenu active item
+        _.each($submenus, function (submenu) {
+            var $elements = _getSelectClassElements($(submenu));
+            _processSelectClassElements($elements);
+        });
+
+        // Add unique active class for out-of-submenu active item
+        var $externalElements = _getSelectClassElements(this.$el)
+            .not('.dropdown-submenu *, .dropdown-submenu');
+        _processSelectClassElements($externalElements);
+
+        function _getSelectClassElements($el) {
+            return $el.find('[data-select-class]')
+                .addBack('[data-select-class]');
+        }
+        function _processSelectClassElements($elements) {
             var maxNbClasses = -1;
-            $el.find('[data-select-class]')
-                .addBack('[data-select-class]')
-                .removeClass('active')
+            $elements.removeClass('active')
                 .filter(function () {
                     var className = $(this).data('selectClass');
                     var nbClasses = className ? className.split(' ').length : 0;