[GlobalStep] User is able to set negative values in "Filter Products by Price" block.

[gglobalstep]

Environment:
Windows 10: Chrome(v83.0.4103.61)(64-bit), Firefox(v77.0.1)(64-bit)

Steps to Reproduce:

1. Open a test site.
2. Login with valid credentials.
3. From dashboard go to Pages.
4. Add new page.
5. Add "All Products" block.
6. Add "Filter Products by Price" block
7. Add "Active Product filters" block
8. Click on Preview or Publish the page.
9. Go to the page having all the above block added.
10. Enter min price 10 and max price 100 in filter.
11. Now change max price to 0.
12. Observe that negative values are displayed in min price field.

Note: Also All products show random products irrespective of the filter applied.

Actual Result:
User is able to set negative price in "Filter by Price" block.

Expected Result:
User should not be able to set negative price as product price cannot be negative.

Refer Artifact:
#2695.zip

[nerrad]

Thanks for reporting this! I can reproduce.

This isn't a block bug so it has a lower priority but definitely something that will get added to our backlog.

[github-actions]

This issue has been marked as stale because it has not seen any activity within the past 60 days. Remove the stale label or post a comment, otherwise it will be closed in 10 days.

[nerrad]

Can reproduce still.

[ralucaStan]

I think we need to define what the expected functionality for the text inputs is.

Thinks I have observed during testing:

1. If the user selects the text in an input and writes - the input disappears
2. Invalid values result in random outputs. I started with the selection below:

• writing positive values resets the interval, with different outputs

  • when I write for Max 20 (< Min). A new interval appears on the bar and in the inputs: Min: 10, Max: 20

  • 

  • when I write for Max 10 (< Min). A new interval appears on the bar and in the inputs: Min: 0, Max: 10

  • 

• writing negative values resets the interval with negative values

  • I select 40 for Min and 90 for Max with the mouse. I then write for Max -80 (< Min). A new interval appears on the bar
  • 

In the current setup, where input values are applied on focus (no button), one proposal could be:

• make sure the user can't write Max values that are lower than the current Min value
• make sure the user can't write Min values that are above the current Max value
• make sure the user can't write negative values

[mikejolley]

🐛 🐛 🐛 🐛

@ralucaStan regarding your proposal:

make sure the user can't write Max values that are lower than the current Min value

If we are currently filtering by min and max, say I am filtering from 20-40, and then I change my mind and want to filter between 0 and 20, if I try to edit max first it will fail. I would have to do min first, then max.

Do you think this is acceptable?

Would an alternative be to reset min to 0 if possible, before rejecting the new value?

make sure the user can't write Min values that are above the current Max value

Same as above. Do we reject, or shift max to the actual maximum or next interval above the inputted value?

make sure the user can't write negative values

👍🏻

We should also define what the expected result is from an invalid input. Do we:

• Leave the value in the input but style it, for example, with a red border?
• Ignore the input and revert to the current valid value?

[ralucaStan]

If we are currently filtering by min and max, say I am filtering from 20-40, and then I change my mind and want to filter between 0 and 20, if I try to edit max first it will fail. I would have to do min first, then max.

For this use case, I think a button would be necessary because you are trying to modify the interval as a whole and not just a limit value. And that interval would also need to be validated on button click.

I was proposing solutions for modifying one of the limits of the existing interval. If the value from the input is invalid, then we could just revert to the previous value.

These are 2 possible use cases of the component, and I think we might need some help from @SpacePol to make this a usable component.

I also noticed that the component also has an option to show a button, but it does not influence the inputs' behavior. When the user writes new values, the slider is updated automatically. A button click is necessary to filter the products list.

[ghost]

After reading the post, I think we can start by make a couple of things:

As @ralucaStan said, we should expect these behaviours:

• make sure the user can't write Max values that are lower than the current Min value
• make sure the user can't write Min values that are above the current Max value
• make sure the user can't write negative values

I would add:

• Obligate the user to just write Max values that are > 0 / Restrict the user to write Max values that are < 0.
• Indicate an invalid input with an error message: "The value must be > 0"
• Add a "tooltip-style" above each knob when moved to show the number that is being shown. This can help usability.
• Add a "reset" button to quickly reset the operation.

When I try to use the filter, as soon as I change a value, the page reloads and goes up the top. We can change this behaviour and show an "Apply" button to trigger the operation. This will make the action expected.

[github-actions]

This issue has been marked as stale because it has not seen any activity within the past 60 days. Our team uses this tool to help surface issues for review. If you are the author of the issue there's no need to comment as it will be looked at.

Internal: After 10 days with no activity this issue will be automatically be closed.

[github-actions]

This issue has been marked as stale because it has not seen any activity within the past 60 days. Our team uses this tool to help surface issues for review. If you are the author of the issue there's no need to comment as it will be looked at.

Internal: After 10 days with no activity this issue will be automatically be closed.

[github-actions]

This issue has been marked as stale because it has not seen any activity within the past 60 days. Our team uses this tool to help surface issues for review. If you are the author of the issue there's no need to comment as it will be looked at.

Internal: After 10 days with no activity this issue will be automatically be closed.

[github-actions]

This issue has been marked as stale because it has not seen any activity within the past 60 days. Our team uses this tool to help surface issues for review. If you are the author of the issue there's no need to comment as it will be looked at.

Internal: After 10 days with no activity this issue will be automatically be closed.