Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Trigger validation on change if the input is not focussed #5373

Merged
merged 1 commit into from
Dec 13, 2021

Conversation

mikejolley
Copy link
Member

This PR fixes #5130 and replaces the fix for #4495.

When browser autofill triggers, from what I can tell with logging, onChange events are fired. However, validation occurs onBlur and this is not fired for autofilled inputs.

Because we can track the onChange event, we can ensure that validation runs (in the background) on non-focused fields.

@senadir this replaces your event handling fix. Does it make more sense to you?

Testing

How to test the changes in this Pull Request:

  1. In a clean browser session with no address, add an item to the cart
  2. Go to Cart block
  3. Open shipping calculator.
  4. Autofill an address.
  5. Click update
  6. You should see no inline validation errors

Changelog

Fix validation error handling after using browser autofill

@mikejolley mikejolley self-assigned this Dec 13, 2021
@mikejolley mikejolley added status: needs review block: checkout Issues related to the checkout block. block: cart Issues related to the cart block. labels Dec 13, 2021
@rubikuserbot rubikuserbot requested review from a team and senadir and removed request for a team December 13, 2021 11:32
@github-actions
Copy link
Contributor

Size Change: +62 B (0%)

Total Size: 817 kB

Filename Size Change
build/cart-blocks/order-summary-frontend.js 8.98 kB -3 B (0%)
build/cart-frontend.js 45.5 kB -1 B (0%)
build/cart.js 44 kB +23 B (0%)
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.24 kB -4 B (0%)
build/checkout-blocks/contact-information-frontend.js 2.95 kB +22 B (+1%)
build/checkout-blocks/order-summary-frontend.js 11.4 kB -6 B (0%)
build/checkout-frontend.js 47.6 kB +3 B (0%)
build/checkout.js 47 kB +28 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 6.21 kB
build/active-filters.js 7.05 kB
build/all-products-frontend.js 18.6 kB
build/all-products.js 34.4 kB
build/all-reviews.js 8.35 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---a7e2bb9b.js 2.76 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button.js 1.48 kB
build/atomic-block-components/add-to-cart-frontend.js 6.87 kB
build/atomic-block-components/add-to-cart.js 6.42 kB
build/atomic-block-components/button-frontend.js 1.48 kB
build/atomic-block-components/button.js 849 B
build/atomic-block-components/category-list-frontend.js 457 B
build/atomic-block-components/category-list.js 458 B
build/atomic-block-components/image-frontend.js 1.37 kB
build/atomic-block-components/image.js 1.05 kB
build/atomic-block-components/price-frontend.js 1.74 kB
build/atomic-block-components/price.js 1.69 kB
build/atomic-block-components/rating-frontend.js 552 B
build/atomic-block-components/rating.js 553 B
build/atomic-block-components/sale-badge-frontend.js 625 B
build/atomic-block-components/sale-badge.js 622 B
build/atomic-block-components/sku-frontend.js 386 B
build/atomic-block-components/sku.js 385 B
build/atomic-block-components/stock-indicator-frontend.js 584 B
build/atomic-block-components/stock-indicator.js 586 B
build/atomic-block-components/summary-frontend.js 872 B
build/atomic-block-components/summary.js 872 B
build/atomic-block-components/tag-list-frontend.js 458 B
build/atomic-block-components/tag-list.js 458 B
build/atomic-block-components/title-frontend.js 1.11 kB
build/atomic-block-components/title.js 1.1 kB
build/attribute-filter-frontend.js 16.3 kB
build/attribute-filter.js 12.7 kB
build/blocks-checkout.js 17.6 kB
build/cart-blocks/accepted-payment-methods-frontend.js 1.15 kB
build/cart-blocks/checkout-button-frontend.js 1.14 kB
build/cart-blocks/empty-cart-frontend.js 345 B
build/cart-blocks/express-payment-frontend.js 4.86 kB
build/cart-blocks/filled-cart-frontend.js 766 B
build/cart-blocks/items-frontend.js 298 B
build/cart-blocks/line-items-frontend.js 5.13 kB
build/cart-blocks/totals-frontend.js 320 B
build/checkout-blocks/actions-frontend.js 1.44 kB
build/checkout-blocks/billing-address-frontend.js 884 B
build/checkout-blocks/express-payment-frontend.js 5.15 kB
build/checkout-blocks/fields-frontend.js 343 B
build/checkout-blocks/order-note-frontend.js 1.13 kB
build/checkout-blocks/payment-frontend.js 7.41 kB
build/checkout-blocks/shipping-address-frontend.js 971 B
build/checkout-blocks/shipping-methods-frontend.js 4.81 kB
build/checkout-blocks/terms-frontend.js 1.21 kB
build/checkout-blocks/totals-frontend.js 324 B
build/featured-category.js 8.55 kB
build/featured-product.js 9.9 kB
build/handpicked-products.js 7.32 kB
build/legacy-template.js 2.08 kB
build/mini-cart-component-frontend.js 14.2 kB
build/mini-cart-contents.js 3.46 kB
build/mini-cart-frontend.js 1.76 kB
build/mini-cart.js 6.65 kB
build/price-filter-frontend.js 12.4 kB
build/price-filter.js 8.6 kB
build/price-format.js 1.18 kB
build/product-best-sellers.js 7.51 kB
build/product-categories.js 3.47 kB
build/product-category.js 8.35 kB
build/product-new.js 7.66 kB
build/product-on-sale.js 8.05 kB
build/product-search.js 2.46 kB
build/product-tag.js 7.76 kB
build/product-top-rated.js 7.63 kB
build/products-by-attribute.js 8.48 kB
build/reviews-by-category.js 11.8 kB
build/reviews-by-product.js 12.9 kB
build/reviews-frontend.js 7.24 kB
build/single-product-frontend.js 22.1 kB
build/single-product.js 10.4 kB
build/stock-filter-frontend.js 6.81 kB
build/stock-filter.js 6.82 kB
build/vendors--atomic-block-components/add-to-cart--cart-blocks/order-summary--checkout-blocks/billing-ad--c5eb4dcd-frontend.js 18.9 kB
build/vendors--atomic-block-components/add-to-cart-frontend.js 6.82 kB
build/vendors--atomic-block-components/price--cart-blocks/line-items--cart-blocks/order-summary--checkout--8a3571de-frontend.js 5.71 kB
build/vendors--cart-blocks/line-items--checkout-blocks/order-summary-frontend.js 3.14 kB
build/vendors--cart-blocks/order-summary--checkout-blocks/billing-address--checkout-blocks/order-summary---eb4d2cec-frontend.js 4.75 kB
build/wc-blocks-data.js 8.84 kB
build/wc-blocks-editor-style-rtl.css 4.32 kB
build/wc-blocks-editor-style.css 4.32 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 949 B
build/wc-blocks-registry.js 2.7 kB
build/wc-blocks-shared-context.js 1.51 kB
build/wc-blocks-shared-hocs.js 1.14 kB
build/wc-blocks-style-rtl.css 21.1 kB
build/wc-blocks-style.css 21.1 kB
build/wc-blocks-vendors-style-rtl.css 1.28 kB
build/wc-blocks-vendors-style.css 1.28 kB
build/wc-blocks-vendors.js 65.5 kB
build/wc-blocks.js 2.96 kB
build/wc-payment-method-bacs.js 820 B
build/wc-payment-method-cheque.js 816 B
build/wc-payment-method-cod.js 912 B
build/wc-payment-method-paypal.js 838 B
build/wc-payment-method-stripe.js 11.1 kB
build/wc-settings.js 2.6 kB

compressed-size-action

Copy link
Member

@senadir senadir left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is an elegant solution that fixes the issue and decouples inputs from the checkout processor.

@github-actions github-actions bot added this to the 6.6.0 milestone Dec 13, 2021
@mikejolley mikejolley merged commit 0591133 into trunk Dec 13, 2021
@mikejolley mikejolley deleted the fix/5130-autofill branch December 13, 2021 16:44
@mikejolley mikejolley restored the fix/5130-autofill branch December 14, 2021 13:36
jonny-bull pushed a commit to jonny-bull/woocommerce-gutenberg-products-block that referenced this pull request Dec 14, 2021
jonny-bull pushed a commit to jonny-bull/woocommerce-gutenberg-products-block that referenced this pull request Dec 16, 2021
@nielslange nielslange deleted the fix/5130-autofill branch April 19, 2023 23:46
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: cart Issues related to the cart block. block: checkout Issues related to the checkout block.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Autofill not working in Cart shipping form
2 participants