React input mask issue with onChange event focus on cursor position

Question

I am trying to implement Input Mask with children as input component, I used https://github.com/sanniassin/react-input-mask. The problem is while onChange() event triggers setState() is called and the state is updated. While updating the state the component is re-rendered. So the state value is also updated and cursor moved to the end of the input value.I am expecting it should stayed on changing position. Here is my code

import InputMask from 'react-input-mask';

const [state, setState] = useState<StateTypes>({
    myVal: '123.123.123-56'
});

const onChangeValue = (inputVal: any) => {
    setState({
      myVal: inputVal
});
};

<InputMask mask="999.999.999-99" onChange={onChangeValue} value={state.myVal}>
 <Input name={'myVal'} />
</InputMask>

After setting the state input component is re-rendered, so cursor point moved to the end. Can someone help me out.

Thanks

Found any solution to this? I encountered this issue too.

Snirka
– Snirka

2021-09-09 12:17:45 +00:00
Commented Sep 9, 2021 at 12:17 — Snirka
– Snirka, Commented Sep 9, 2021 at 12:17

Cristo Ferrao · Accepted Answer · 2023-01-12 04:50:18Z

0

 try {
            window.document.getElementById("expiryDtId").focus();
          } catch (error) {
            console.error(error);
          }

got solution by using id and javascript

  <InputMask
        mask="99/99/9999" 

        id={"expiryDtId"}
/>

answered Jan 12, 2023 at 4:50

Cristo Ferrao

1053 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React input mask issue with onChange event focus on cursor position

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related