diff --git a/packages/devextreme/js/__internal/ui/chat/messagelist.ts b/packages/devextreme/js/__internal/ui/chat/messagelist.ts index f34bc46093b9..8ed512a1918b 100644 --- a/packages/devextreme/js/__internal/ui/chat/messagelist.ts +++ b/packages/devextreme/js/__internal/ui/chat/messagelist.ts @@ -612,6 +612,7 @@ class MessageList extends Widget { _clean(): void { this._lastMessageDate = null; + resizeObserverSingleton.unobserve(this.$element().get(0)); super._clean(); } diff --git a/packages/devextreme/js/__internal/ui/splitter/splitter.ts b/packages/devextreme/js/__internal/ui/splitter/splitter.ts index 974b21bd2e79..103d20524dee 100644 --- a/packages/devextreme/js/__internal/ui/splitter/splitter.ts +++ b/packages/devextreme/js/__internal/ui/splitter/splitter.ts @@ -1124,6 +1124,11 @@ class Splitter extends CollectionWidgetLiveUpdate { getLayout(): number[] { return this._layout ?? []; } + + _clean(): void { + resizeObserverSingleton.unobserve(this.$element().get(0)); + super._clean(); + } } registerComponent('dxSplitter', Splitter); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageList.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageList.tests.js index 9053d6a99484..4087b3564224 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageList.tests.js +++ b/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(); + }); }); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/splitter.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/splitter.tests.js index e022256120a7..2263ff859c60 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/splitter.tests.js +++ b/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 = $('
'); + + $splitter.dxSplitter({ + dataSource: [{ size: '30%' }, { size: '70%' }] + }); + + $splitter.remove(); + + assert.strictEqual(resizeObserverSingleton.unobserve.callCount, 2); + + resizeObserverSingleton.unobserve.restore(); + }); }); QUnit.module('Pane visibility', moduleConfig, () => {