fix(input): set caret position at the end of the input programmatically

core-ds · Oct 14, 2024 · 0089d17 · 0089d17
1 parent 71fd3f2
commit 0089d17
Showing 1 changed file with 12 additions and 1 deletion.
diff --git a/packages/input/src/components/base-input/Component.tsx b/packages/input/src/components/base-input/Component.tsx
@@ -18,7 +18,7 @@ import cn from 'classnames';
 import { FormControlProps } from '@alfalab/core-components-form-control';
 import { getDataTestId } from '@alfalab/core-components-shared';
 import { StatusBadge } from '@alfalab/core-components-status-badge';
-import { useFocus } from '@alfalab/hooks';
+import { useFocus, useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
 
 import { ClearButton } from '../clear-button';
 
@@ -283,6 +283,17 @@ export const BaseInput = React.forwardRef<HTMLInputElement, BaseInputProps>(
         const clearButtonVisible = clear && filled && !disabled && !readOnlyProp;
         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 handleInputFocus = useCallback(
             (event: React.FocusEvent<HTMLInputElement>) => {
                 if (!readOnly) {