fix(donate): reset "other" value when switching tiers

[miguelpeixe]

All Submissions:

• Have you followed the Newspack Contributing guideline?
• Does your code follow the WordPress' coding standards and VIP Go coding standards?
• Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

Suppose a reader inputs an invalid value to the "Other" tier option and selects any other tier. In that case, the form will fail to submit due to the browser's native validation for the number input.

This PR implements a reset to the input whenever the tier selection changes, preventing the value from failing form validation.

How to test the changes in this Pull Request:

1. While in the release branch confirm the issue by visiting a page with a frequency-based donate block
2. Input a value lower than the allowed minimum (default is $5)
3. Switch to a suggested value tier and confirm you're not able to continue donating
4. Switch back to "Other", place a valid number, switch back to the suggested option and confirm you're able to continue
5. Switch to this branch, repeat steps 2 and 3, and confirm you are able to continue
6. Close the modal, switch back to "Other" and confirm the value is the default suggestion

Other information:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you written new tests for your changes, as applicable?
• Have you successfully ran tests with your changes locally?

[dkoo]

Works for the described scenario, but in testing this I found another related bug that we should fix as well:

In step 3, after inputting the invalid value in "Other", switch to a different frequency tab entirely anad attempt to donate. At this point no matter what value you input the form will throw an error because the invalid input in the other Frequency tier is not focusable:

An invalid form control with name='donation_value_month_other' is not focusable. <input type=​"number" min=​"5" name=​"donation_value_month_other" value=​"25" id=​"newspack-tier-month-52187-other-input">​

[miguelpeixe]

Is this error only being thrown in this branch? I think it's related to the input not being visible when other tiers are selected, not related to this PR.

[dkoo]

Is this error only being thrown in this branch?

No, the bug is present on release and master as well, but it feels very related to the bug fixed in this PR since it results in a similar reader experience. I think if we were to also reset the "Other" input values whenever switching tabs (not just tiers) it would solve the issue.

[miguelpeixe]

Aaah I see what you mean. I thought the focusable issue was something else. Looking.

[miguelpeixe]

Fixed in 97d5f77

[dkoo]

That fixes it!

[matticbot]

🎉 This PR is included in version 1.75.3 🎉

The release is available on:

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

Your semantic-release bot 📦🚀