Fix: Enhanced Product Collection's Price Range filter by improving currency parsing logic to discard unwanted characters #47354
Conversation
…sing This commit addresses a usability issue in the PriceTextField component, highlighted by @dinhtungdu, where the input field would clear itself if users omitted a space between the numeric value and the currency symbol when the currency is configured to appear on the right with a space (e.g., "20$" instead of "20 $"). The problem was rooted in the strict parsing logic that did not account for variations in user input related to currency formatting. The fix involves an enhancement to the numeric parsing function, which now effectively handles various user inputs regardless of space or placement of the currency symbol. The revised parsing logic uses a regular expression to strip out any characters that are not numeric or the designated decimal separator, and then replaces the locale-specific decimal separator with a period for standard numeric conversion. This approach not only fixes the specific issue but also improves the robustness of the component against similar input variations.
Test using WordPress PlaygroundThe changes in this pull request can be previewed and tested using a WordPress Playground instance. Test this pull request with WordPress Playground. Note that this URL is valid for 30 days from when this comment was last updated. You can update it by closing/reopening the PR or pushing a new commit. |
imanish003
changed the title
1. Renaming `formatValueAsCurrency` to `formatNumberAsCurrency` to better reflect its functionality. 2. Moving the `convertCurrencyStringToNumber` function outside of the PriceTextField component, enhancing readability and reusability. 3. Changing the internal state handling from `newValue` to `inputValue`, directly managing the string input and parsing it as needed for further processing. This will force input field to re-render.
imanish003
added
type: bug
|
Hi @kmanijak, @woocommerce/woo-fse Apart from reviewing the code changes, please make sure to review the testing instructions as well. You can follow this guide to find out what good testing instructions should look like: |
github-actions
bot
added
the
plugin: woocommerce
There was a problem hiding this comment.
Tested and parsing works as expected!
There's one typo in testing steps:
Now remove the space between value & currency symbol i.e. "20$" and click away. Verify that it should become "10 $".
Should be:
Now remove the space between value & currency symbol i.e. "20$" and click away. Verify that it should become "20 $".
Also, I found one minor issue. The default input value is empty (placeholder says Auto). But when you interact with input and remove the value, then it defaults to 0 which is kind of misleading:
In this image, there's MIN set to 0,01 and MAX set to nothing but displays 0. But I double checked it can be also reproduced in trunk so just raising for clarity! Otherwise approving!
I fixed it, thanks for pointing it out 🙏🏻
Good catch! I am looking into it. I can probably fix it with this PR as well. |
…to fix/47351-product-collection-improve-handling-of-currency-input-formatting-in-price-range-filter
This commit fixes an issue where an empty string in the price conversion function resulted in a value of 0. Now, empty strings are properly handled and do not convert to a numerical value.
imanish003
deleted the
fix/47351-product-collection-improve-handling-of-currency-input-formatting-in-price-range-filter
branch
github-actions
bot
added
the
needs: analysis
alvarothomas
added
needs: external testing
imanish003
changed the title
Changes proposed in this Pull Request:
This PR addresses an issue in the PriceTextField component, highlighted by @dinhtungdu in this github comment, where the input field would clear itself if users omitted a space between the numeric value and the currency symbol when the currency is configured to appear on the right with a space (e.g., "20$" instead of "20 $"). The problem was rooted in the strict parsing logic that did not account for variations in user input related to currency formatting.
The fix involves an enhancement to the numeric parsing function, which now effectively handles various user inputs regardless of space or placement of the currency symbol. The revised parsing logic uses a regular expression to strip out any characters that are not numeric or the designated decimal separator, and then replaces the locale-specific decimal separator with a period for standard numeric conversion. This approach not only fixes the specific issue but also improves the robustness of the component against similar input variations.
Closes #47351
How to test the changes in this Pull Request:
Using the WooCommerce Testing Instructions Guide, include your detailed testing instructions:
Case 1:
Case 2:
Try entering a MIN or MAX price with a decimal, for example, "10.123764". After clicking away, number of decimals should become equal to as set in "Currency Options" as you can see in screenshot above. In my case, It should become "10.12 $"
Case 3:
Try entering random values. Here are some inputs and expected outputs:
As you can see above, it will try to parse numeric values from the input and discard unwanted characters like alphabets, space, etc.
Changelog entry
Significance
Type
Message
Fix: Enhanced Product Collection's Price Range filter by improving currency parsing logic to discard unwanted characters
Comment