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

Ensure input is validated when autofilled in Firefox #11062

Merged
merged 1 commit into from
Nov 6, 2023
Merged

Conversation

opr
Copy link
Contributor

@opr opr commented Sep 27, 2023

What

Ensures the validateInput function is fired when a ValidatedTextInput gets its value autofilled in Firefox.

Why

For some reason there seems to be a race condition where inputs get validated before the useEffect that handles autofill/direct changes to the data store in Chrome. This PR causes validation to run when the input is updated via data store or autofill.

Testing Instructions

Please consider any edge cases this change may have, and also other areas of the product this may impact.

Perform these steps both in Firefox and Chrome/Brave/Edge

  1. As a guest user (open the site in an incognito/private window), add an item to your cart and go to the Checkout block.
  2. Enter your details and check out successfully.
  3. Repeat again without closing the window, when you load the Checkout block the second time, expand the saved address card.
  4. The address details should be auto filled based on your last order.
  5. Ensure you can check out without editing the fields.
  • Do not include in the Testing Notes
  • Should be tested by the development team exclusively

Screenshots or screencast

n/a

WooCommerce Visibility

Required:

  • WooCommerce Core
  • Feature plugin
  • Experimental
  • N/A

Checklist

Required:

  • This PR has either a [type] label or a [skip-changelog] label.
  • This PR is assigned to a milestone.

Conditional:

  • This PR has a changelog description (if [skip-changelog] label is not present).
  • This PR adds/removes a feature flag & I've updated this doc.
  • This PR adds/removes an experimental interfaces, and I've updated this doc.
  • This PR has been accessibility tested.
  • This PR has had any necessary documentation added/updated.

Changelog

Ensure some checkout fields are not incorrectly marked as invalid when using browser autofill.

@opr opr added type: bug The issue/PR concerns a confirmed bug. focus: blocks Specific work involving or impacting how blocks behave. block: checkout Issues related to the checkout block. labels Sep 27, 2023
@opr opr self-assigned this Sep 27, 2023
@woocommercebot woocommercebot requested review from a team and tarunvijwani and removed request for a team September 27, 2023 15:02
@github-actions
Copy link
Contributor

github-actions bot commented Sep 27, 2023

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-11062.zip

Script Dependencies Report

There is no changed script dependency between this branch and trunk.

This comment was automatically generated by the ./github/compare-assets action.

TypeScript Errors Report

  • Files with errors: 522
  • Total errors: 2342

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Sep 27, 2023

Size Change: 0 B

Total Size: 1.53 MB

ℹ️ View Unchanged
Filename Size
build/3810-frontend.js 18.3 kB
build/4124-frontend.js 23.9 kB
build/8280-frontend.js 8.48 kB
build/active-filters-frontend.js 6.66 kB
build/active-filters-rtl.css 1.68 kB
build/active-filters-wrapper-frontend.js 6.88 kB
build/active-filters-wrapper-rtl.css 1.53 kB
build/active-filters-wrapper.css 1.53 kB
build/active-filters.css 1.68 kB
build/active-filters.js 6.04 kB
build/add-to-cart-form-rtl.css 375 B
build/add-to-cart-form.css 373 B
build/all-products-frontend.js 9.68 kB
build/all-products-rtl.css 4.49 kB
build/all-products.css 4.49 kB
build/all-products.js 39.6 kB
build/all-reviews-rtl.css 1.74 kB
build/all-reviews.css 1.74 kB
build/all-reviews.js 7.77 kB
build/attribute-filter-frontend.js 19.9 kB
build/attribute-filter-rtl.css 4.03 kB
build/attribute-filter-wrapper-frontend.js 21 kB
build/attribute-filter-wrapper-rtl.css 1.65 kB
build/attribute-filter-wrapper.css 1.65 kB
build/attribute-filter.css 4.01 kB
build/attribute-filter.js 11.3 kB
build/base-components-stock-filter-wrapper~attribute-filter-wrapper~rating-filter-wrapper-style.scss-rtl.css 2.97 kB
build/base-components-stock-filter-wrapper~attribute-filter-wrapper~rating-filter-wrapper-style.scss.css 2.97 kB
build/blocks-checkout.js 33.9 kB
build/blocks-components.js 8.68 kB
build/breadcrumbs-rtl.css 234 B
build/breadcrumbs.css 234 B
build/breadcrumbs.js 2.12 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.4 kB
build/cart-blocks/cart-accepted-payment-methods-style.js 153 B
build/cart-blocks/cart-cross-sells-frontend.js 268 B
build/cart-blocks/cart-cross-sells-products-frontend.js 5.55 kB
build/cart-blocks/cart-cross-sells-products-style.js 153 B
build/cart-blocks/cart-cross-sells-style.js 269 B
build/cart-blocks/cart-express-payment-frontend.js 5.36 kB
build/cart-blocks/cart-express-payment-style.js 155 B
build/cart-blocks/cart-items-frontend.js 273 B
build/cart-blocks/cart-items-style.js 240 B
build/cart-blocks/cart-line-items-frontend.js 9.23 kB
build/cart-blocks/cart-line-items-style.js 153 B
build/cart-blocks/cart-order-summary-frontend.js 20.5 kB
build/cart-blocks/cart-order-summary-style.js 341 B
build/cart-blocks/cart-totals-frontend.js 290 B
build/cart-blocks/cart-totals-style.js 253 B
build/cart-blocks/empty-cart-frontend.js 367 B
build/cart-blocks/empty-cart-style.js 365 B
build/cart-blocks/filled-cart-frontend.js 605 B
build/cart-blocks/filled-cart-style.js 333 B
build/cart-blocks/order-summary-coupon-form-frontend.js 20.8 kB
build/cart-blocks/order-summary-coupon-form-style.js 155 B
build/cart-blocks/order-summary-discount-frontend.js 20.9 kB
build/cart-blocks/order-summary-discount-style.js 155 B
build/cart-blocks/order-summary-fee-frontend.js 288 B
build/cart-blocks/order-summary-fee-style.js 153 B
build/cart-blocks/order-summary-heading-frontend.js 346 B
build/cart-blocks/order-summary-heading-style.js 351 B
build/cart-blocks/order-summary-shipping-frontend.js 20.5 kB
build/cart-blocks/order-summary-shipping-style.js 154 B
build/cart-blocks/order-summary-subtotal-frontend.js 291 B
build/cart-blocks/order-summary-subtotal-style.js 154 B
build/cart-blocks/order-summary-taxes-frontend.js 456 B
build/cart-blocks/order-summary-taxes-style.js 202 B
build/cart-blocks/proceed-to-checkout-frontend.js 7.62 kB
build/cart-blocks/proceed-to-checkout-style.js 1.08 kB
build/cart-frontend.js 29 kB
build/cart-rtl.css 9.23 kB
build/cart.css 9.22 kB
build/cart.js 39.6 kB
build/catalog-sorting-rtl.css 259 B
build/catalog-sorting.css 259 B
build/catalog-sorting.js 1.69 kB
build/checkout-blocks/actions-frontend.js 8.11 kB
build/checkout-blocks/actions-style.js 1.01 kB
build/checkout-blocks/billing-address-frontend.js 9.91 kB
build/checkout-blocks/billing-address-style.js 630 B
build/checkout-blocks/contact-information-frontend.js 1.7 kB
build/checkout-blocks/contact-information-style.js 653 B
build/checkout-blocks/express-payment-frontend.js 5.84 kB
build/checkout-blocks/fields-frontend.js 297 B
build/checkout-blocks/fields-style.js 271 B
build/checkout-blocks/order-note-frontend.js 674 B
build/checkout-blocks/order-summary-cart-items-frontend.js 6.47 kB
build/checkout-blocks/order-summary-cart-items-style.js 153 B
build/checkout-blocks/order-summary-coupon-form-frontend.js 20.9 kB
build/checkout-blocks/order-summary-coupon-form-style.js 155 B
build/checkout-blocks/order-summary-discount-frontend.js 20.9 kB
build/checkout-blocks/order-summary-discount-style.js 154 B
build/checkout-blocks/order-summary-fee-frontend.js 291 B
build/checkout-blocks/order-summary-fee-style.js 155 B
build/checkout-blocks/order-summary-frontend.js 20.5 kB
build/checkout-blocks/order-summary-shipping-frontend.js 20.5 kB
build/checkout-blocks/order-summary-shipping-style.js 154 B
build/checkout-blocks/order-summary-style.js 342 B
build/checkout-blocks/order-summary-subtotal-frontend.js 289 B
build/checkout-blocks/order-summary-subtotal-style.js 155 B
build/checkout-blocks/order-summary-taxes-frontend.js 456 B
build/checkout-blocks/order-summary-taxes-style.js 201 B
build/checkout-blocks/payment-frontend.js 14.5 kB
build/checkout-blocks/payment-style.js 509 B
build/checkout-blocks/pickup-options-frontend.js 11.2 kB
build/checkout-blocks/pickup-options-style.js 480 B
build/checkout-blocks/shipping-address-frontend.js 9.87 kB
build/checkout-blocks/shipping-address-style.js 517 B
build/checkout-blocks/shipping-method-frontend.js 1.96 kB
build/checkout-blocks/shipping-method-style.js 1.43 kB
build/checkout-blocks/shipping-methods-frontend.js 19 kB
build/checkout-blocks/shipping-methods-style.js 456 B
build/checkout-blocks/terms-frontend.js 1.55 kB
build/checkout-blocks/terms-style.js 1.02 kB
build/checkout-blocks/totals-frontend.js 334 B
build/checkout-blocks/totals-style.js 301 B
build/checkout-frontend.js 30.6 kB
build/checkout-rtl.css 8.46 kB
build/checkout.css 8.45 kB
build/checkout.js 42.7 kB
build/classic-shortcode-rtl.css 242 B
build/classic-shortcode.css 241 B
build/classic-shortcode.js 4.63 kB
build/collection-filters.js 1.72 kB
build/collection-price-filter-frontend.js 577 B
build/collection-price-filter-rtl.css 1.28 kB
build/collection-price-filter.css 1.28 kB
build/collection-price-filter.js 3.43 kB
build/customer-account-rtl.css 410 B
build/customer-account.css 409 B
build/customer-account.js 3.17 kB
build/featured-category-rtl.css 974 B
build/featured-category.css 973 B
build/featured-category.js 13.6 kB
build/featured-product-rtl.css 1.02 kB
build/featured-product.css 1.02 kB
build/featured-product.js 13.8 kB
build/filter-wrapper-frontend.js 14.6 kB
build/filter-wrapper-rtl.css 378 B
build/filter-wrapper.css 378 B
build/filter-wrapper.js 2.37 kB
build/handpicked-products.js 7.32 kB
build/legacy-template-rtl.css 240 B
build/legacy-template.css 240 B
build/legacy-template.js 7.83 kB
build/mini-cart-component-frontend.js 30.8 kB
build/mini-cart-contents-block/cart-button-frontend.js 1.86 kB
build/mini-cart-contents-block/cart-button-style.js 1.23 kB
build/mini-cart-contents-block/checkout-button-frontend.js 1.95 kB
build/mini-cart-contents-block/checkout-button-style.js 1.43 kB
build/mini-cart-contents-block/empty-cart-frontend.js 374 B
build/mini-cart-contents-block/empty-cart-style.js 378 B
build/mini-cart-contents-block/filled-cart-frontend.js 284 B
build/mini-cart-contents-block/filled-cart-style.js 288 B
build/mini-cart-contents-block/footer-frontend.js 3.87 kB
build/mini-cart-contents-block/footer-style.js 1.95 kB
build/mini-cart-contents-block/items-frontend.js 247 B
build/mini-cart-contents-block/items-style.js 251 B
build/mini-cart-contents-block/products-table-frontend.js 8.58 kB
build/mini-cart-contents-block/shopping-button-frontend.js 501 B
build/mini-cart-contents-block/shopping-button-style.js 361 B
build/mini-cart-contents-block/title-frontend.js 2.04 kB
build/mini-cart-contents-block/title-items-counter-frontend.js 1.74 kB
build/mini-cart-contents-block/title-items-counter-style.js 1.2 kB
build/mini-cart-contents-block/title-label-frontend.js 1.68 kB
build/mini-cart-contents-block/title-label-style.js 1.14 kB
build/mini-cart-contents-block/title-style.js 1.38 kB
build/mini-cart-contents-rtl.css 3.21 kB
build/mini-cart-contents.css 3.2 kB
build/mini-cart-contents.js 16 kB
build/mini-cart-frontend.js 2.35 kB
build/mini-cart-rtl.css 2.44 kB
build/mini-cart.css 2.44 kB
build/mini-cart.js 6.09 kB
build/order-confirmation-additional-information-rtl.css 367 B
build/order-confirmation-additional-information.css 367 B
build/order-confirmation-additional-information.js 1.57 kB
build/order-confirmation-billing-address-rtl.css 398 B
build/order-confirmation-billing-address.css 397 B
build/order-confirmation-billing-address.js 1.55 kB
build/order-confirmation-billing-wrapper.js 1.5 kB
build/order-confirmation-downloads-rtl.css 477 B
build/order-confirmation-downloads-wrapper.js 1.57 kB
build/order-confirmation-downloads.css 478 B
build/order-confirmation-downloads.js 1.9 kB
build/order-confirmation-shipping-address-rtl.css 399 B
build/order-confirmation-shipping-address.css 398 B
build/order-confirmation-shipping-address.js 1.55 kB
build/order-confirmation-shipping-wrapper.js 1.5 kB
build/order-confirmation-status-rtl.css 280 B
build/order-confirmation-status.css 280 B
build/order-confirmation-status.js 1.54 kB
build/order-confirmation-summary-rtl.css 460 B
build/order-confirmation-summary.css 460 B
build/order-confirmation-summary.js 1.75 kB
build/order-confirmation-totals-rtl.css 594 B
build/order-confirmation-totals-wrapper.js 1.79 kB
build/order-confirmation-totals.css 593 B
build/order-confirmation-totals.js 2.16 kB
build/packages-style-rtl.css 5.13 kB
build/packages-style.css 5.13 kB
build/page-content-wrapper.js 1.94 kB
build/price-filter-frontend.js 7.93 kB
build/price-filter-rtl.css 2.68 kB
build/price-filter-wrapper-frontend.js 8.08 kB
build/price-filter-wrapper-rtl.css 2.53 kB
build/price-filter-wrapper.css 2.53 kB
build/price-filter.css 2.67 kB
build/price-filter.js 7.51 kB
build/price-format.js 913 B
build/product-add-to-cart-frontend.js 8.11 kB
build/product-add-to-cart-rtl.css 1.37 kB
build/product-add-to-cart.css 1.38 kB
build/product-add-to-cart.js 8.35 kB
build/product-average-rating-frontend.js 1.88 kB
build/product-average-rating.js 1.4 kB
build/product-best-sellers.js 7.04 kB
build/product-button-frontend.js 4.93 kB
build/product-button-interactivity-frontend.js 8.48 kB
build/product-button-rtl.css 1.14 kB
build/product-button.css 1.14 kB
build/product-button.js 4.64 kB
build/product-categories-rtl.css 654 B
build/product-categories.css 654 B
build/product-categories.js 2.58 kB
build/product-category.js 7.97 kB
build/product-collection.js 13.5 kB
build/product-details-rtl.css 397 B
build/product-details.css 394 B
build/product-gallery-frontend.js 638 B
build/product-gallery-large-image-frontend.js 585 B
build/product-gallery-large-image-next-previous.js 4.23 kB
build/product-gallery-large-image.js 2.45 kB
build/product-gallery-pager.js 3.47 kB
build/product-gallery-rtl.css 1.15 kB
build/product-gallery-thumbnails.js 3.88 kB
build/product-gallery.css 1.15 kB
build/product-gallery.js 9.49 kB
build/product-image-frontend.js 2.89 kB
build/product-image-gallery-rtl.css 307 B
build/product-image-gallery.css 306 B
build/product-image-rtl.css 996 B
build/product-image.css 994 B
build/product-image.js 2.53 kB
build/product-new.js 7.3 kB
build/product-on-sale.js 7.29 kB
build/product-price-frontend.js 2.81 kB
build/product-price-rtl.css 644 B
build/product-price.css 643 B
build/product-price.js 2.33 kB
build/product-query-rtl.css 350 B
build/product-query.css 349 B
build/product-query.js 11.6 kB
build/product-rating-counter-frontend.js 2.19 kB
build/product-rating-counter.js 1.71 kB
build/product-rating-frontend.js 2.53 kB
build/product-rating-rtl.css 247 B
build/product-rating-stars-frontend.js 2.43 kB
build/product-rating-stars-rtl.css 899 B
build/product-rating-stars.css 900 B
build/product-rating-stars.js 1.95 kB
build/product-rating.css 246 B
build/product-rating.js 2.05 kB
build/product-results-count-rtl.css 230 B
build/product-results-count.css 230 B
build/product-results-count.js 1.65 kB
build/product-reviews-rtl.css 458 B
build/product-reviews.css 458 B
build/product-sale-badge-frontend.js 2.01 kB
build/product-sale-badge-rtl.css 437 B
build/product-sale-badge.css 437 B
build/product-sale-badge.js 1.52 kB
build/product-search-rtl.css 419 B
build/product-search.css 417 B
build/product-search.js 2.6 kB
build/product-sku-frontend.js 2.02 kB
build/product-sku-rtl.css 240 B
build/product-sku.css 239 B
build/product-sku.js 1.53 kB
build/product-stock-indicator-frontend.js 2.19 kB
build/product-stock-indicator-rtl.css 232 B
build/product-stock-indicator.css 232 B
build/product-stock-indicator.js 1.71 kB
build/product-summary-frontend.js 2.35 kB
build/product-summary-rtl.css 549 B
build/product-summary.css 549 B
build/product-summary.js 1.87 kB
build/product-tag.js 7.5 kB
build/product-template-rtl.css 536 B
build/product-template.css 535 B
build/product-template.js 2.79 kB
build/product-title-frontend.js 2.31 kB
build/product-title-rtl.css 693 B
build/product-title.css 694 B
build/product-title.js 2.04 kB
build/product-top-rated.js 7.57 kB
build/products-by-attribute.js 8.02 kB
build/rating-filter-frontend.js 18.8 kB
build/rating-filter-rtl.css 4.09 kB
build/rating-filter-wrapper-frontend.js 19.7 kB
build/rating-filter-wrapper-rtl.css 1.73 kB
build/rating-filter-wrapper.css 1.73 kB
build/rating-filter.css 4.08 kB
build/rating-filter.js 5.79 kB
build/reviews-by-category-rtl.css 1.74 kB
build/reviews-by-category.css 1.74 kB
build/reviews-by-category.js 11.4 kB
build/reviews-by-product-rtl.css 1.74 kB
build/reviews-by-product.css 1.74 kB
build/reviews-by-product.js 12.7 kB
build/reviews-frontend.js 6.43 kB
build/single-product-rtl.css 378 B
build/single-product.css 378 B
build/single-product.js 11.1 kB
build/stock-filter-frontend.js 18.9 kB
build/stock-filter-rtl.css 3.88 kB
build/stock-filter-wrapper-frontend.js 19.9 kB
build/stock-filter-wrapper-rtl.css 1.49 kB
build/stock-filter-wrapper.css 1.49 kB
build/stock-filter.css 3.87 kB
build/stock-filter.js 6.42 kB
build/store-notices.js 1.67 kB
build/wc-blocks-classic-template-revert-button-style-rtl.css 240 B
build/wc-blocks-classic-template-revert-button-style.css 239 B
build/wc-blocks-classic-template-revert-button.js 1.18 kB
build/wc-blocks-data.js 19.7 kB
build/wc-blocks-editor-style-rtl.css 7.18 kB
build/wc-blocks-editor-style.css 7.17 kB
build/wc-blocks-google-analytics.js 1.16 kB
build/wc-blocks-jetpack-woocommerce-analytics.js 750 B
build/wc-blocks-middleware.js 735 B
build/wc-blocks-registry.js 2.74 kB
build/wc-blocks-rtl.css 2.47 kB
build/wc-blocks-shared-context.js 850 B
build/wc-blocks-shared-hocs.js 1.4 kB
build/wc-blocks-vendors.js 61.7 kB
build/wc-blocks.css 2.48 kB
build/wc-blocks.js 2.61 kB
build/wc-interactivity.js 10.7 kB
build/wc-payment-method-bacs.js 406 B
build/wc-payment-method-cheque.js 401 B
build/wc-payment-method-cod.js 508 B
build/wc-payment-method-paypal.js 437 B
build/wc-settings.js 2.4 kB
build/wc-shipping-method-pickup-location.js 29.4 kB

compressed-size-action

Copy link

@tarunvijwani tarunvijwani left a comment

Choose a reason for hiding this comment

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

@opr Thank you for working on it. The changes looks good. However, I couldn't test the PR. For some reasons, the address field is getting disabled for me. I tried commenting out the ValidateInput to check if it is caused by this change but no dice. It's happening on trunk as well. Maybe something wrong with my local. I'll test the PR again tomorrow.

Here is the screen recording:

Screen.Recording.2023-09-29.at.12.30.32.AM.mov

@github-actions
Copy link
Contributor

github-actions bot commented Oct 6, 2023

This PR has been marked as stale because it has not seen any activity within the past 7 days. Our team uses this tool to help surface pull requests that have slipped through review.

If deemed still relevant, the pr can be kept active by ensuring it's up to date with the main branch and removing the stale label.

@github-actions github-actions bot added the status: stale Stale issues and PRs have had no updates for 60 days. label Oct 6, 2023
@opr opr force-pushed the fix/firefox-autofill branch from 6658cbd to f32d116 Compare October 26, 2023 11:57
@opr opr requested a review from tarunvijwani October 26, 2023 11:57
Copy link

@tarunvijwani tarunvijwani left a comment

Choose a reason for hiding this comment

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

@opr Thank you for the change! The input validation error has been resolved.

Repeat again without closing the window, when you load the Checkout block the second time, the details should be auto filled based on your last order.

When I was trying to order again, it already had a saved address. We might need to update the testing instructions or find another way to test this.
image

@github-actions github-actions bot removed the status: stale Stale issues and PRs have had no updates for 60 days. label Oct 27, 2023
Copy link

@tarunvijwani tarunvijwani left a comment

Choose a reason for hiding this comment

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

Works as expected. 🎉

@github-actions github-actions bot added this to the 11.5.0 milestone Oct 27, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: checkout Issues related to the checkout block. focus: blocks Specific work involving or impacting how blocks behave. type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants