When editing a formatted number the cursor moves to the end

[Artem Kulikov]

I use react, at first there was a problem associated with the fact that the brackets in the formatted number was not erased, it was solved and it was followed by the next problem - when you change the formatted number the cursor always moves to the end. Attempts to save the caret position and return it after changing the state were unsuccessful. Can you please tell me how to solve this problem?

Providing the implementation code for my component

import React, { useEffect, useState } from 'react';
import { formatIncompletePhoneNumber, parseIncompletePhoneNumber } from 'libphonenumber-js/max';

const InputPhoneNumberTest = ({
  number,
  country,
  onChange,
}) => {
  const [input, setInput] = useState('');

  useEffect(() => {
    setInput(number);
  }, [number]);

  const onChangeHandler = (e) => {
    if (country) {
      let newValue = parseIncompletePhoneNumber(e.target.value)

			if (newValue === input) {
				const newValueFormatted = formatIncompletePhoneNumber(newValue, country.value)
				if (newValueFormatted.indexOf(e.target.value) === 0) {
					newValue = newValue.slice(0, -1)
				}
			}

      e.target.value = newValue
      onChange(e);
    }
  };

  return (
    <>
        <input 
          type='text'
          value={formatIncompletePhoneNumber(input, country)}
          onChange={onChangeHandler}
        />
    </>
  )
}

export default InputPhoneNumberTest;

[Nikolay]

at first there was a problem associated with the fact that the brackets in the formatted number was not erased, it was solved and it was followed by the next problem

It's not an issue with this library.
#225

when you change the formatted number the cursor always moves to the end. Attempts to save the caret position and return it after changing the state were unsuccessful. Can you please tell me how to solve this problem?

It's not an issue with this library.