primefaces
Deleting the contents of InputNumber resets the value to the initial value
Describe the bug
When used with PrimeVue Forms, Deleting a number from the InputNumber field does not work as expected. It first resets the number to initial value, then it if you try again it deletes the number.
This can be seen in the docs - https://primevue.org/inputnumber/#forms
Pull Request Link
No response
Reason for not contributing a PR
- [x] Lack of time
- [x] Unsure how to implement the fix/feature
- [ ] Difficulty understanding the codebase
- [ ] Other
Other Reason
No response
Reproducer
https://stackblitz.com/edit/qxt4dp9s?file=src%2FApp.vue
Environment
This issue is present in the official docs, the reproducer is from the documentation - https://primevue.org/inputnumber/#forms
Vue version
NA
PrimeVue version
NA
Node version
NA
Browser(s)
Chrome
Steps to reproduce the behavior
Go to the input field Type a single random number (not 5 as that is the initial value) Try to delete that number
You will see the number is first reset to the initial value, then it is deleted on the second attempt
Expected behavior
The number should be deleted on the initial attempt
It seems the root cause is the allow-empty property being set to true, which is the default.
If you set it to false, it at least doesn’t reset the previous value. This workaround might be fine until a proper fix is available.
We are thinking about switching to primevue forms and are also experiencing this problem. @mertsincan is it still in active development?
As strange as this sounds, I found that another work around is to not have your initial value in a field at the base level of the object.
For example, in the original posted reproducer the initial value is:
By nesting it in one level:
and updating the form components to reference this adjustment:
you are now able to clear the field without it resetting.
I discovered this because I have several fields and some were exhibiting this behavior and some were not. Hopefully this will offer more insights on what is going wrong here.
Hello @jerkald ! I tried your method, but with no success, do you have a working stackblitz by any chance ? Thanks !
@aboudard - I was unable to make a simple example for you. Prior to my last post, I did adjust the stackblitz that was originally referenced at the top of the ticket and if you do the changes I recommend, you'll find that the hot reloading in stackblitz does populate the form correctly and the bug went away. However, what I failed to do was a complete refresh of the page running the new code, which results in the contents of the input not populating correctly.
My own project is far more complicated with many layers between the form and the inputnumber component, so I can not post that here. However the approach works for me.
Given the information I have, I'd say the bug is a result of how the data is initially populated in the form. I still needed to nest my field for the problem to go away, but perhaps there is more too it, such as not immediately having the value. I fetch mine from a backend as needed and don't have a nice constant integer value like in the stackblitz that's immediately available.
Sorry I couldn't be more help.
One last attempt before I go, I found a simple implementation elsewhere that didn't require any wrapping and it just worked. Copying the code into a later version of primevue, resulted in the error reported in this issue.
The code in the src/App.vue of these stackblitzes is identical, but the primevue versions are different
Working: (primevue 4.3.1) https://stackblitz.com/edit/yucbttft-ukya8wyx?file=src%2FApp.vue
Not Working: (primevue 4.3.6) https://stackblitz.com/edit/qxt4dp9s-hfshtett?file=src%2FApp.vue
Good catch about the versions ! I'll look into it, because in the latest version, I really can't reproduce your experiment.
