Fix: Cannot read properties of undefined (reading 'offsetHeight') (T1321478) (#32869)

Author: ajivanyandev

packages/devextreme/js/__internal/common/core/animation/m_position.test.ts

@@ -0,0 +1,37 @@
+import {
+  describe, expect, it,
+} from '@jest/globals';
+import $ from '@js/core/renderer';
+
+import positionUtils from './m_position';
+
+describe('position (setup)', () => {
+  describe('when called with an element that does not exist in the DOM', () => {
+    it('should return undefined without throwing for a selector that matches nothing', () => {
+      const result = positionUtils.setup('#non-existent-element-that-was-unmounted');
+
+      expect(result).toBeUndefined();
+    });
+
+    it('should return undefined without throwing for an empty jQuery object', () => {
+      const $emptyElement = $([]);
+
+      const result = positionUtils.setup($emptyElement);
+
+      expect(result).toBeUndefined();
+    });
+  });
+
+  describe('when called with an existing element as a getter (no options)', () => {
+    it('should return the offset of the element', () => {
+      const el = document.createElement('div');
+      document.body.appendChild(el);
+
+      const result = positionUtils.setup(el);
+
+      expect(result).toBeDefined();
+
+      document.body.removeChild(el);
+    });
+  });
+});

packages/devextreme/js/__internal/common/core/animation/m_position.ts

@@ -399,6 +399,10 @@ const getOffsetWithoutScale = function ($startElement, $currentElement = $startE
 const position = function (what, options?) {
   const $what = $(what);
 
+  if (!$what.length) {
+    return undefined;
+  }
+
   if (!options) {
     return $what.offset();
   }

packages/devextreme/js/__internal/common/core/animation/translator.test.ts

@@ -0,0 +1,34 @@
+import {
+  describe, expect, it,
+} from '@jest/globals';
+import $ from '@js/core/renderer';
+
+import { resetPosition } from './translator';
+
+describe('resetPosition', () => {
+  describe('when called with an empty jQuery wrapper and finishTransition=true', () => {
+    it('should not throw when element does not exist in the DOM', () => {
+      const $emptyElement = $([]);
+
+      expect(() => resetPosition($emptyElement, true)).not.toThrow();
+    });
+
+    it('should not throw when element selector matches nothing', () => {
+      const $missingElement = $('#non-existent-element-that-was-unmounted');
+
+      expect(() => resetPosition($missingElement, true)).not.toThrow();
+    });
+  });
+
+  describe('when called with a real DOM element and finishTransition=true', () => {
+    it('should not throw and should reset position', () => {
+      const el = document.createElement('div');
+      document.body.appendChild(el);
+      const $el = $(el);
+
+      expect(() => resetPosition($el, true)).not.toThrow();
+
+      document.body.removeChild(el);
+    });
+  });
+});

packages/devextreme/js/__internal/common/core/animation/translator.ts

@@ -150,9 +150,6 @@ export const resetPosition = function (
   clearCache($element);
 
   if (finishTransition) {
-    // @ts-expect-error
-    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-    $element.get(0).offsetHeight;
     $element.css('transition', originalTransition);
   }
 };