Proceed to checkout button does not work if pressed when there is a coupon validation error

[ralucaStan]

Describe the bug

In the Cart block, after I receive a coupon validation error I click on the Proceed to checkout button. It does not take me to the next step, but the button receives focus, and the error of the coupon disappears. I have to click again for the button to work and take me to Checkout.

To reproduce

Steps to reproduce the behavior:

1. Make sure you use the Cart block
2. Add any product to the cart and go to the Cart block.
3. Enter an invalid coupon code.
4. See coupon validation error appear
5. Click on the "Proceed to Checkout" button
6. Notice that you are still in the Cart block
7. Click again to proceed to checkout

Expected behavior

The button should work from the first click and I should see the Checkout block.

Screenshots

Before I click the button

After I click the button

Environment

WordPress (please complete the following information):

• Core version: 5.7
• WooCommerce version: 5.1.0
• WooCommerce Blocks version: 4.6.0
• Site language: EN
• Any other plugins installed: -

Desktop (please complete the following information):

• OS: macOS
• Browser Chrome & Firefox. On Safari it works as expected

[senadir]

This is a technical explanation of what's happening.

When you have an error, the layout shifts to the bottom a bit. When you go to click on the button, you register a keydown event (that causes the focus to register) but the moment you blur off the coupon, the error disappears, causing a jump (and the button going up), so by the time you get to keyup the button is not there anymore and you click on void.
If you try to click at the top of the button, both events would register because the jump is not that big.

A possible fix for this is to prevent the layout shift by having the coupon input account for the validation error message in its width, this is done by having the tag (<p>) already in there and empty so it keeps it line-height but doesn't show any text.
Another solution is to not remove the error on blur, but leave it until the next API call or something.

[ralucaStan]

Persisting the error on blur just for this field raises some issues as it's also used in the checkout and there the persistent error makes the form invalid. It also changes the TextInput just for this case.
So I opted in this PR to solve the issue just for the coupon field by adding the space taken by the error. If this happens in other places we might need to find another approach.

[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.

[mikejolley]

Not sure why this was reopened.