Enhancement: Introduce formatValueOnBlur Flag

[Contraboi]

This pull request introduces the formatValueOnBlur flag, allowing users to customize the behavior of the onValueChange function on blur events. The default behavior is set to true, ensuring no disruption to the current production code.

[Contraboi]

@cchanxzy

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (026329f) 100.00% compared to head (3b53c40) 100.00%.
Report is 1 commits behind head on main.

❗ Your organization needs to install the Codecov GitHub app to enable full functionality.

Additional details and impacted files

@@            Coverage Diff            @@
##              main      #339   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           15        15           
  Lines          411       412    +1     
  Branches       154       160    +6     
=========================================
+ Hits           411       412    +1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[cchanxzy]

Hi @Contraboi, can you give me a use case on why this is a feature you want to add? Thanks

[mraballard]

@cchanxzy I can give you a use case that I'm running into. I am using the currency input in a filter drawer. I've notice that if I enter a value, let's say 100, the argument passed to the onValueChange looks like this { "stringValue": "1", "_name": "minSalary", "_valueObj": { "float": 1, "formatted": "$1", "value": "1" } }. It seems that when the field blurs, the onValueChange runs again with an updated argument: { "stringValue": "1.00", "_name": "minSalary", "_valueObj": { "float": 1, "formatted": "$1.00", "value": "1.00" } }. This is a problem for me because I'm saving the values in react context and displaying them in badges. When the onValue runs as the drawer closes my badges flash as 100 changes to 100.00. There may be a better solution but I think this would help my case.

[Contraboi]

Hi @cchanxzy, sorry for late response.

My use case involves complex calculations where multiple fields depend on each other. I did not want to format the value on blur because that could lead to unexpected behavior.

I believe that, in general, there needs to be a flag to disable formatting values on blur. This is not intuitive, as input fields typically operate on button click or change, rather than on blur.

[mraballard]

Hi @cchanxzy, sorry for late response.

My use case involves complex calculations where multiple fields depend on each other. I did not want to format the value on blur because that could lead to unexpected behavior.

I believe that, in general, there needs to be a flag to disable formatting values on blur. This is not intuitive, as input fields typically operate on button click or change, rather than on blur.

Indeed, I was very surprised when I realized the onValueChange event runs after the onBlur. That is not expected behavior. After reviewing the code I've realized that as a work-around I can use the onChange prop instead of the onValueChange and format the event.target.value myself. Doable but not ideal.

[github-actions]

🎉 This PR is included in version 3.8.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[cchanxzy]

Merged! Thanks @Contraboi for your PR!