Caret Utils: Remove body contains input check (T1309092) (#31375)

Co-authored-by: marker dao ® <[email protected]>

Author: marker-dao

packages/devextreme/js/__internal/ui/text_box/m_utils.caret.ts

@@ -1,25 +1,33 @@
 import devices from '@js/core/devices';
 import domAdapter from '@js/core/dom_adapter';
+import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
 import { isDefined } from '@js/core/utils/type';
 
-export interface CaretRange { start: number; end: number }
+export interface CaretRange {
+  start: number;
+  end: number;
+}
 
 const {
   ios,
-  // @ts-expect-error
+  // @ts-expect-error Device type doesn't contain mac
   mac,
 } = devices.real();
+
 // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
 const isFocusingOnCaretChange = ios || mac;
 
 const getCaret = (input: HTMLInputElement): CaretRange => {
-  let range;
+  let range: CaretRange = {
+    start: 0,
+    end: 0,
+  };
 
   try {
     range = {
-      start: input.selectionStart,
-      end: input.selectionEnd,
+      start: input.selectionStart ?? 0,
+      end: input.selectionEnd ?? 0,
     };
   } catch (e) {
     range = {
@@ -31,32 +39,39 @@ const getCaret = (input: HTMLInputElement): CaretRange => {
   return range;
 };
 
-const setCaret = (input, position) => {
-  const body = domAdapter.getBody();
-  if (!body.contains(input) && !body.contains(input.getRootNode().host)) {
-    return;
-  }
-
+export const setCaret = (
+  input: HTMLInputElement,
+  selection: CaretRange,
+): void => {
   try {
-    input.selectionStart = position.start;
-    input.selectionEnd = position.end;
-  } catch (e) { /* empty */ }
+    input.selectionStart = selection.start;
+    input.selectionEnd = selection.end;
+  } catch { /** empty */ }
 };
-// @ts-expect-error
-// eslint-disable-next-line @typescript-eslint/no-invalid-void-type
-const caret = (input, position?: any, force = false): CaretRange | undefined => {
-  input = $(input).get(0);
 
-  if (!isDefined(position)) {
-    return getCaret(input);
+const caret = (
+  input: HTMLInputElement | dxElementWrapper,
+  selection?: CaretRange,
+  force = false,
+): CaretRange | undefined => {
+  const inputElement = $(input).get(0) as HTMLInputElement;
+
+  if (!isDefined(selection)) {
+    return getCaret(inputElement);
   }
 
   // NOTE: AppleWebKit-based browsers focuses element input after caret position has changed
-  if (!force && isFocusingOnCaretChange && domAdapter.getActiveElement(input) !== input) {
-    return;
+  if (
+    !force
+    && isFocusingOnCaretChange
+    && domAdapter.getActiveElement(inputElement) !== inputElement
+  ) {
+    return undefined;
   }
 
-  setCaret(input, position);
+  setCaret(inputElement, selection);
+
+  return undefined;
 };
 
 export default caret;

packages/devextreme/testing/tests/DevExpress.utils/utils.caret.tests.js

@@ -28,15 +28,28 @@ testModule('caret', () => {
         assert.deepEqual(caret($input), caretPosition, 'caret position set correctly');
     });
 
-    test('T341277 - an exception if element is not in document', function(assert) {
-        const caretPosition = { start: 1, end: 2 };
+    test('exception should not be thrown if the input is not attached to the DOM (T341277)', function(assert) {
+        const setterStub = sinon.stub();
         const input = document.createElement('input');
 
+        Object.defineProperty(input, 'selectionStart', {
+            set() {
+                setterStub();
+                throw new Error('Cannot set selection');
+            },
+        });
+
+        const getActiveElementStub = sinon.stub(domAdapter, 'getActiveElement').returns(input);
+
         try {
-            caret(input, caretPosition);
+            caret(input, { start: 1, end: 2 });
+
+            assert.strictEqual(setterStub.callCount, 1, 'setter has been called');
             assert.ok(true, 'exception is not thrown');
         } catch(e) {
             assert.ok(false, 'exception is thrown');
+        } finally {
+            getActiveElementStub.restore();
         }
     });
 
@@ -61,28 +74,19 @@ testModule('caret', () => {
 
     test('\'setCaret\' does not raise an error when it is impossible to set a range', function(assert) {
         const caretPosition = { start: 1, end: 2 };
-        const initialDescriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'selectionStart');
-        const getterSetterConfig = {
-            get: function() {
-                throw 'You can not get a selection';
-            },
-            set: function(value) {
-                throw 'You can not set a selection';
-            }
-        };
-
-        Object.defineProperty(HTMLInputElement.prototype, 'selectionStart', $.extend({}, initialDescriptor, getterSetterConfig));
-
         const input = $('<input>').appendTo('#qunit-fixture').get(0);
 
+        Object.defineProperty(input, 'selectionStart', {
+            set() { throw new Error('Cannot set selection'); },
+            get() { throw new Error('Cannot set selection'); },
+        });
+
         try {
             caret(input, caretPosition);
             assert.ok(true, 'exception is not thrown');
         } catch(e) {
             assert.ok(false, 'exception is thrown');
         }
-
-        Object.defineProperty(HTMLInputElement.prototype, 'selectionStart', initialDescriptor);
     });
 
     [false, true].forEach((forceSetCaret) => {