When editing a formatted number the cursor moves to the end

[kartemdev]

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;

[catamphetamine]

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. https://github.com/catamphetamine/libphonenumber-js/issues/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.

[alexrecuenco]

I understand it isn't an issue of this library, but is there any character I could add that could be not formatted away by the library?

If I am getting "+346|66" from a user, I would think that I could set some marker in element.selectionEnd "+346^66", and have it be preserved when formatting "+34 6^66" so that I can place the cursor at the new location of ^ and replace it with '' without creating my own parsing, "+34 6|66".

Would that be possible? The unicode character could be a madeup one that is made available as a export GLOBAL_CURSOR_MARKER or it could just be some option that I can set ignoreChar: ''. Or is any of this out of scope for the library?

[catamphetamine]

@alexrecuenco

I understand it isn't an issue of this library.

Exactly.

but is there any character I could add that could be not formatted away by the library?

I guess not.

Would that be possible?

Dunno: didn't read the rest.

[alexrecuenco]

Thank you for your quick reply.

But maybe we could've avoided that last sentence.

So not even worth it to try to suggest a PR?

[catamphetamine]

So not even worth it to try to suggest a PR?

Correct

On Fri, 5 Jul 2024 at 23:49, Alex Recuenco @.***> wrote:

Thank you for your quick reply.

But maybe we could've avoided that last sentence.

So not even worth it to try to suggest a PR?

— Reply to this email directly, view it on GitHub https://github.com/catamphetamine/libphonenumber-js/issues/439#issuecomment-2211398301, or unsubscribe https://github.com/notifications/unsubscribe-auth/AADUP3YD4HXG4TTR4JPS5MLZK4BHHAVCNFSM6AAAAABKNIXDASVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEMJRGM4TQMZQGE . You are receiving this because you modified the open/close state.Message ID: @.***>