update remove function for phone input

package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "no-copy-frontend",
-	"version": "0.2.0",
+	"version": "0.7.0",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "no-copy-frontend",
-			"version": "0.2.0",
+			"version": "0.7.0",
 			"dependencies": {
 				"@tailwindcss/postcss": "^4.1.17",
 				"@tanstack/match-sorter-utils": "^8.19.4",

src/app/ui/inputs/phone-input.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState, ChangeEvent } from 'react';
+import { useState, ChangeEvent, useEffect, useRef, KeyboardEvent } from 'react';
 import styles from '@/app/styles/login.module.scss';
 
 interface PhoneInputProps {
@@ -10,6 +10,7 @@ interface PhoneInputProps {
 
 export default function PhoneInput({ phoneState, validateHandler }: PhoneInputProps) {
 	const [phone, setPhone] = useState(phoneState ? phoneState : '');
+	const inputRef = useRef<HTMLInputElement>(null);
 
 	const formatPhoneNumber = (value: string, isBackspace: boolean): string => {
 		if (value === '+') {
@@ -60,17 +61,43 @@ export default function PhoneInput({ phoneState, validateHandler }: PhoneInputPr
 
 	const handleChange = (e: ChangeEvent<HTMLInputElement>): void => {
 		const input = e.target.value;
-		//@ts-ignore
+		const nativeEvent = e.nativeEvent as InputEvent;
-		const isBackspace = e.nativeEvent.inputType === 'deleteContentBackward';
+		const isBackspace = nativeEvent.inputType === 'deleteContentBackward';
 		const formatted = formatPhoneNumber(input, isBackspace);
 		setPhone(formatted);
 	};
 
+	const range = useRef<{
+		start: number | null,
+		key: string;
+	} | null>(null);
+
+	const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>): void => {
+		const input = e.currentTarget;
+		range.current = {
+			start: input.selectionStart,
+			key: e.key
+		};
+	};
+
+	useEffect(() => {
+		console.log('use');
+		if (range.current?.key === 'Backspace' && inputRef.current) {
+			const startPos = range.current.start ?? 0;
+			const newPosition = Math.max(0, startPos - 1);
+			inputRef.current.setSelectionRange(newPosition, newPosition);
+		} else if (range.current?.key === 'Delete' && inputRef.current) {
+			inputRef.current.setSelectionRange(range.current.start, range.current.start);
+		}
+
+	}, [phone]);
+
 	return (
 		<input
 			type="phone"
 			id="phone"
 			name="phone"
+			ref={inputRef}
 			className={`${styles['form-input']}`}
 			placeholder="+7 (999) 123-45-67"
 			value={phone}
@@ -78,6 +105,9 @@ export default function PhoneInput({ phoneState, validateHandler }: PhoneInputPr
 				handleChange(e);
 				validateHandler(e);
 			}}
+			onKeyDown={(e) => {
+				handleKeyDown(e);
+			}}
 		/>
 	)
 }