2 files changed, 19 insertions, 5 deletions
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 4a9e6cb91d6..7fe47777697 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/addons/web_editor/static/src/js/editor/snippets.editor.js
@@ -84,6 +84,16 @@ var SnippetEditor = Widget.extend({
             });
         }
 
+        this.$target.on('transitionstart.snippet_editor, animationstart.snippet_editor', function () {
+            self._targetIsAnimated = true;
+        });
+        this.$target.on('transitionend.snippet_editor, animationend.snippet_editor', function () {
+            self._targetIsAnimated = false;
+            if (self.$el.is('.oe_active')) {
+                self.cover();
+            }
+        });
+
         return $.when.apply($, defs);
     },
     /**
@@ -93,6 +103,7 @@ var SnippetEditor = Widget.extend({
         this.cleanForSave();
         this._super.apply(this, arguments);
         this.$target.removeData('snippet-editor');
+        this.$target.off('.snippet_editor');
     },
 
     //--------------------------------------------------------------------------
@@ -124,6 +135,11 @@ var SnippetEditor = Widget.extend({
      * Makes the editor overlay cover the associated snippet.
      */
     cover: function () {
+        if (this._targetIsAnimated) {
+            // Do not cover a target being animated, it will be covered once the
+            // animation is completed.
+            return;
+        }
         var offset = this.$target.offset();
         var manipulatorOffset = this.$el.parent().offset();
         offset.top -= manipulatorOffset.top;
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 97d3777b95f..b254ea932d2 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -290,13 +290,11 @@ var SnippetOption = Widget.extend({
             .addClass('active');
 
         _processSelectClassElements(this.$el);
-        _.each(this.$el.find('.dropdown-menu'), function (group) {
-            _processSelectClassElements($(group).children());
-        });
 
-        function _processSelectClassElements($elements) {
+        function _processSelectClassElements($el) {
             var maxNbClasses = -1;
-            $elements.filter('[data-select-class]')
+            $el.find('[data-select-class]')
+                .addBack('[data-select-class]')
                 .removeClass('active')
                 .filter(function () {
                     var className = $(this).data('selectClass');