ENGCOM-5600: [Lib] Fix previous attempts to correct wrong behaviour of collapsible library #23862

Author: sidolov

lib/web/mage/collapsible.js

@@ -15,8 +15,8 @@ define([
     var hideProps = {},
         showProps = {};
 
-    hideProps.height =  'hide';
-    showProps.height =  'show';
+    hideProps.height = 'hide';
+    showProps.height = 'show';
 
     $.widget('mage.collapsible', {
         options: {
@@ -66,7 +66,7 @@ define([
 
             this.element.on('dimensionsChanged', function (e) {
                 if (e.target && e.target.classList.contains('active')) {
-                    this._scrollToTopIfVisible(e.target);
+                    this._scrollToTopIfNotVisible();
                 }
             }.bind(this));
 
@@ -309,7 +309,7 @@ define([
 
             if (event) {
                 $.each(event.split(' '), function (index, eventName) {
-                    self.events[ eventName ] = '_eventHandler';
+                    self.events[eventName] = '_eventHandler';
                 });
             }
             this._off(this.trigger);
@@ -567,24 +567,35 @@ define([
         },
 
         /**
-         * @param {HTMLElement} elem
          * @private
          */
-        _scrollToTopIfVisible: function (elem) {
-            if (!this._isElementOutOfViewport(elem)) {
-                elem.scrollIntoView();
+        _scrollToTopIfNotVisible: function () {
+            if (this._isElementOutOfViewport()) {
+                this.header[0].scrollIntoView();
             }
         },
 
         /**
-         * @param {HTMLElement} elem
          * @private
          * @return {Boolean}
          */
-        _isElementOutOfViewport: function (elem) {
-            var rect = elem.getBoundingClientRect();
-
-            return rect.bottom < 0 || rect.right < 0 || rect.left > window.innerWidth || rect.top > window.innerHeight;
+        _isElementOutOfViewport: function () {
+            var headerRect = this.header[0].getBoundingClientRect(),
+                contentRect = this.content.get().length ? this.content[0].getBoundingClientRect() : false,
+                headerOut,
+                contentOut;
+
+            headerOut = headerRect.bottom - headerRect.height < 0 ||
+                headerRect.right - headerRect.width < 0 ||
+                headerRect.left + headerRect.width > window.innerWidth ||
+                headerRect.top + headerRect.height > window.innerHeight;
+
+            contentOut = contentRect ? contentRect.bottom - contentRect.height < 0 ||
+                contentRect.right - contentRect.width < 0 ||
+                contentRect.left + contentRect.width > window.innerWidth ||
+                contentRect.top + contentRect.height > window.innerHeight : false;
+
+            return headerOut ? headerOut : contentOut;
         }
     });