InputNumber changes in view when shouldnt while combined with formik

[jperezbosonit]

Describe the bug

While combined with formik the view is not sync with the formik value

Reproducer

https://codesandbox.io/s/primereact-demo-forked-t1sqit?file=/src/App.js

PrimeReact version

9.5.0

React version

18.x

Language

ALL

Build / Runtime

Create React App (CRA)

Browser(s)

No response

Steps to reproduce the behavior

Write in the input more than 200

Expected behavior

No response

[bu3alwa]

So the way you are doing is will break the sync between the validation from using Formik and any type of input not just primereact. Your input should always send the input from the user to formik then formik should validate and output an error if its invalid. You should process your validation on your onsubmit the way you like. There should be more details on formik on how to process onsubmit onSuccess or onError (not 100% certain I use RHF).

You can check the code sandbox below for an example.

https://codesandbox.io/s/primereact-demo-forked-lg5wdw

[jperezbosonit]

@bu3alwa First of all thanks for the response. I usually work with formik the way you describe, the problem is that the case that is giving me problems is because i have a max value that cant be surpased and a list of inputs that must distribute this max global number beetwen them, so its imposible to set an static maximum, also each of them have a maximum value different from the other max global value. Maybe i could try to set a variable that dinamically adapts depending on the amount pending to distribute between the inputs and set it dinamically to the validationSchema, but i dont know if that will work. I'll give it a try later, once again thanks for the response, i'll keep you updated.

[melloware]

So I wonder if I should close this as it sounds like a Formik related issue and not a PR issue as @bu3alwa showed it working fine with PrimeReact the way its supposed to work?

[jperezbosonit]

I just tried it with the normal input and the problem is not there so i think its a PrimeReact issue. Also in my project we are doing a workaround using inputText and parsing to number and it works fine, but we lose some inputNumber funcionality. @bu3alwa @melloware

A code sandbox with normal input where it works as suposed:

https://codesandbox.io/s/primereact-demo-forked-gcy68k?file=/src/App.js

[bu3alwa]

I see what you mean. InputText seems to work as well so its just isolated to InputNumber. There seems to be a lot of data manipulation by reference going on in InputNumber.

I think I know what is causing this. I think the value is being updated based of the input and props.value is never being checked after first load.

        const updateValue = (event, valueStr, insertedValueStr, operation) => {
            let currentValue = inputRef.current.value;
            let newValue = null;

            if (valueStr != null) {
                newValue = evaluateEmpty(parseValue(valueStr));
                updateInput(newValue, insertedValueStr, operation, valueStr);

                handleOnChange(event, currentValue, newValue);
            }
        };

So updateInput I believe sends the input to InputText then handleOnChange is called. Which is think causes this desync when the state stays the same but the text got updated based off the input and not the state of props.value.

A possible fix is to call any rendered update after handleOnChange and making sure the value from props.value is what gets rendered not the input text.

[github-actions[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you with the latest version, please leave any comment, and we will keep it open. We are sorry that we have not been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you for your understanding!