diff --git a/package-lock.json b/package-lock.json index 60c4472..9c001cc 100644 --- a/package-lock.json +++ b/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", diff --git a/src/app/ui/inputs/phone-input.tsx b/src/app/ui/inputs/phone-input.tsx index 58ccfda..215e472 100644 --- a/src/app/ui/inputs/phone-input.tsx +++ b/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(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): void => { const input = e.target.value; - //@ts-ignore - const isBackspace = e.nativeEvent.inputType === 'deleteContentBackward'; + const nativeEvent = e.nativeEvent as InputEvent; + 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): 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 ( { + handleKeyDown(e); + }} /> ) } \ No newline at end of file