Splitter, MessageList: unobserve ResizeObserver on detach (T1311706) (#31515)

Author: anna-shakhova

packages/devextreme/js/__internal/ui/chat/messagelist.ts

@@ -612,6 +612,7 @@ class MessageList extends Widget<Properties> {
 
   _clean(): void {
     this._lastMessageDate = null;
+    resizeObserverSingleton.unobserve(this.$element().get(0));
 
     super._clean();
   }

packages/devextreme/js/__internal/ui/splitter/splitter.ts

@@ -1124,6 +1124,11 @@ class Splitter extends CollectionWidgetLiveUpdate<Properties> {
   getLayout(): number[] {
     return this._layout ?? [];
   }
+
+  _clean(): void {
+    resizeObserverSingleton.unobserve(this.$element().get(0));
+    super._clean();
+  }
 }
 
 registerComponent('dxSplitter', Splitter);

packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageList.tests.js

@@ -15,6 +15,7 @@ import TypingIndicator from '__internal/ui/chat/typingindicator';
 import devices from '__internal/core/m_devices';
 import localization from 'localization';
 import dateLocalization from 'common/core/localization/date';
+import resizeObserverSingleton from 'core/resize_observer';
 
 const CHAT_MESSAGELIST_CONTENT_CLASS = 'dx-chat-messagelist-content';
 const CHAT_MESSAGELIST_EMPTY_MESSAGE_CLASS = 'dx-chat-messagelist-empty-message';
@@ -1634,6 +1635,19 @@ QUnit.module('MessageList', () => {
             }
         });
     });
+
+    QUnit.test('Should unobserve element on detach (T1311706)', function(assert) {
+        sinon.stub(resizeObserverSingleton, 'unobserve');
+
+        const instance = new MessageList($('#component'));
+        const $element = $(instance.$element());
+
+        $element.remove();
+
+        assert.strictEqual(resizeObserverSingleton.unobserve.callCount, 2);
+
+        resizeObserverSingleton.unobserve.restore();
+    });
 });
 
 

packages/devextreme/testing/tests/DevExpress.ui.widgets/splitter.tests.js

@@ -8,6 +8,7 @@ import config from 'core/config';
 import { createEvent } from 'common/core/events/utils/index';
 import { name as DOUBLE_CLICK_EVENT } from 'common/core/events/double_click';
 import { name as CLICK_EVENT } from 'common/core/events/click';
+import resizeObserverSingleton from 'core/resize_observer';
 
 import 'generic_light.css!';
 
@@ -1344,6 +1345,22 @@ QUnit.module('Pane sizing', moduleConfig, () => {
 
         this.assertLayout(['0', '66.6677', '33.3339']);
     });
+
+    QUnit.test('Should unobserve element on detach (T1311706)', function(assert) {
+        sinon.stub(resizeObserverSingleton, 'unobserve');
+
+        const $splitter = $('<div id="splitterDetached">');
+
+        $splitter.dxSplitter({
+            dataSource: [{ size: '30%' }, { size: '70%' }]
+        });
+
+        $splitter.remove();
+
+        assert.strictEqual(resizeObserverSingleton.unobserve.callCount, 2);
+
+        resizeObserverSingleton.unobserve.restore();
+    });
 });
 
 QUnit.module('Pane visibility', moduleConfig, () => {