fix(input): fix set selection range (#1488)

* fix(input): fix set selection range * feat(input): refactor use effect --------- Co-authored-by: Aleksandr Dyuzhikov <[email protected]>
core-ds · Dec 13, 2024 · 8987193 · 8987193
1 parent 455a24d
commit 8987193
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 7 deletions.
diff --git a/.changeset/weak-poems-fail.md b/.changeset/weak-poems-fail.md
@@ -0,0 +1,5 @@
+---
+'@alfalab/core-components-input': patch
+---
+
+Фикс вызова input.setSelectionRange
diff --git a/packages/input/src/components/base-input/Component.tsx b/packages/input/src/components/base-input/Component.tsx
@@ -221,6 +221,8 @@ const SIZE_TO_CLASSNAME_MAP = {
     72: 'size-72',
 };
 
+const inputTypesForSelectionRange = ['password', 'search', 'tel', 'text', 'url'];
+
 export const BaseInput = React.forwardRef<HTMLInputElement, BaseInputProps>(
     (
         {
@@ -284,14 +286,19 @@ export const BaseInput = React.forwardRef<HTMLInputElement, BaseInputProps>(
         const hasInnerLabel = label && labelView === 'inner';
 
         useLayoutEffect_SAFE_FOR_SSR(() => {
-            // https://github.com/facebook/react/issues/14125
-            if (restProps.autoFocus) {
-                const input = inputRef.current;
-
-                if (input) {
-                    input.setSelectionRange(input.value.length, input.value.length);
-                }
+            const input = inputRef.current;
+
+            if (
+                !restProps.autoFocus ||
+                !input ||
+                // https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange
+                !inputTypesForSelectionRange.includes(input.type)
+            ) {
+                return;
             }
+
+            // https://github.com/facebook/react/issues/14125
+            input.setSelectionRange(input.value.length, input.value.length);
         }, []);
 
         const handleInputFocus = useCallback(