M2C-22619 Add check if found elements are not nested to prevent from processing panels incorrectly

Author: ptylek

lib/web/mage/tabs.js

@@ -102,28 +102,49 @@ define([
          * @private
          */
         _processPanels: function () {
-            this.contents = this.element.children(this.options.content);
+            var isNotNested = this._isNotNested.bind(this);
 
-            this.collapsibles = this.element.children(this.options.collapsibleElement);
+            this.contents = this.element
+                .find(this.options.content)
+                .filter(isNotNested);
+
+            this.collapsibles =  this.element
+                .find(this.options.collapsibleElement)
+                .filter(isNotNested);
 
             this.collapsibles
                 .attr('role', 'presentation')
                 .parent()
                 .attr('role', 'tablist');
 
-            this.headers = this.element.children(this.options.header);
+            this.headers = this.element
+                .find(this.options.header)
+                .filter(isNotNested);
 
             if (this.headers.length === 0) {
                 this.headers = this.collapsibles;
             }
-            this.triggers = this.element.children(this.options.trigger);
+            this.triggers = this.element
+                .find(this.options.trigger)
+                .filter(isNotNested);
 
             if (this.triggers.length === 0) {
                 this.triggers = this.headers;
             }
             this._callCollapsible();
         },
 
+        /**
+         * @param {HTMLElement} elem
+         * @private
+         * @return {Boolean}
+         */
+        _isNotNested: function (index, element) {
+            var parentContent = $(element).parents(this.options.content);
+
+            return !parentContent.length || !this.element.find(parentContent).length;
+          },
+
         /**
          * Setting the disabled and active tabs and calling instantiation of collapsible
          * @private