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

Add requireExactMatch prop to ComboBox to prevent wrong country/state values being sent to the server #6426

Merged
merged 8 commits into from
May 18, 2022

Conversation

opr
Copy link
Contributor

@opr opr commented May 18, 2022

Previously, the ComboBox would run onChange before an actual value was entered (example: you start slowly typing United Kingdom but it would send United Arab Emirates to the server because it was the first value encountered when typing Un....)

This PR makes the following changes:

  • Add an optional prop to the ComboBox component called requireExactMatch - the purpose of this prop is to make the ComboBox only run the onChange function if the entered value exactly matches one of the allowed options.
  • Add unit tests to verify this is working as intended.

Fixes #6423

Other Checks

  • 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
  • I tagged two reviewers because this PR makes queries to the database or I think it might have some security impact.

Testing

Automated Tests

  • Changes in this PR are covered by Automated Tests.
    • Unit tests
    • E2E tests

User Facing Testing

  1. Check your store is set to have no default customer location set (WooCommerce > Settings > General)
  2. In an incognito window Add an item to your cart that requires shipping.
  3. Leave all address fields blank and uncheck Use same address for billing.
  4. Go to the Country/Region input on the Billing Address form
  5. Enter Uni and wait 3-4 seconds, without leaving the field, scroll up and verify the Country/Region in the Shipping Address form is still empty.
  6. Select United Kingdom.
  7. Scroll up and verify the Country/Region in the Shipping Address form is still empty.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Changelog

Fix an issue where the country in the shipping and billing addresses would update incorrectly.

@opr opr added status: needs review type: bug The issue/PR concerns a confirmed bug. block: cart Issues related to the cart block. block: checkout Issues related to the checkout block. labels May 18, 2022
@opr opr self-assigned this May 18, 2022
@rubikuserbot rubikuserbot requested review from a team and tarunvijwani and removed request for a team May 18, 2022 15:33
@opr opr requested a review from alexflorisca May 18, 2022 15:34
@github-actions
Copy link
Contributor

github-actions bot commented May 18, 2022

Size Change: +149 B (0%)

Total Size: 873 kB

Filename Size Change
build/cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping-frontend.js 6.37 kB +29 B (0%)
build/cart-frontend.js 45.5 kB -1 B (0%)
build/cart.js 44.4 kB +50 B (0%)
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.15 kB +34 B (+1%)
build/checkout.js 45.6 kB +37 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 6.59 kB
build/active-filters.js 7.41 kB
build/all-products-frontend.js 18.1 kB
build/all-products.js 33.4 kB
build/all-reviews.js 7.8 kB
build/attribute-filter-frontend.js 17.7 kB
build/attribute-filter.js 13.7 kB
build/blocks-checkout.js 17.4 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.16 kB
build/cart-blocks/cart-express-payment-frontend.js 5.24 kB
build/cart-blocks/cart-items-frontend.js 299 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.27 kB
build/cart-blocks/cart-line-items-frontend.js 433 B
build/cart-blocks/cart-order-summary-frontend.js 1.1 kB
build/cart-blocks/cart-totals-frontend.js 322 B
build/cart-blocks/empty-cart-frontend.js 346 B
build/cart-blocks/filled-cart-frontend.js 783 B
build/cart-blocks/order-summary-coupon-form-frontend.js 2.81 kB
build/cart-blocks/order-summary-discount-frontend.js 2.31 kB
build/cart-blocks/order-summary-fee-frontend.js 273 B
build/cart-blocks/order-summary-heading-frontend.js 454 B
build/cart-blocks/order-summary-shipping-frontend.js 428 B
build/cart-blocks/order-summary-subtotal-frontend.js 273 B
build/cart-blocks/order-summary-taxes-frontend.js 433 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.15 kB
build/checkout-blocks/actions-frontend.js 1.41 kB
build/checkout-blocks/billing-address-frontend.js 889 B
build/checkout-blocks/contact-information-frontend.js 2.83 kB
build/checkout-blocks/express-payment-frontend.js 5.53 kB
build/checkout-blocks/fields-frontend.js 345 B
build/checkout-blocks/order-note-frontend.js 1.07 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.67 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 2.96 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.43 kB
build/checkout-blocks/order-summary-fee-frontend.js 275 B
build/checkout-blocks/order-summary-frontend.js 1.11 kB
build/checkout-blocks/order-summary-shipping-frontend.js 603 B
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B
build/checkout-blocks/order-summary-taxes-frontend.js 432 B
build/checkout-blocks/payment-frontend.js 7.84 kB
build/checkout-blocks/shipping-address-frontend.js 995 B
build/checkout-blocks/shipping-methods-frontend.js 4.71 kB
build/checkout-blocks/terms-frontend.js 1.22 kB
build/checkout-blocks/totals-frontend.js 326 B
build/checkout-frontend.js 47.7 kB
build/featured-category.js 13 kB
build/featured-product.js 11.4 kB
build/handpicked-products.js 7.32 kB
build/legacy-template.js 2.2 kB
build/mini-cart-component-frontend.js 16.6 kB
build/mini-cart-contents-block/empty-cart-frontend.js 364 B
build/mini-cart-contents-block/filled-cart-frontend.js 230 B
build/mini-cart-contents-block/footer--mini-cart-contents-block/products-table-frontend.js 4.69 kB
build/mini-cart-contents-block/footer-frontend.js 5.63 kB
build/mini-cart-contents-block/items-frontend.js 225 B
build/mini-cart-contents-block/products-table-frontend.js 289 B
build/mini-cart-contents-block/shopping-button-frontend.js 287 B
build/mini-cart-contents-block/title-frontend.js 366 B
build/mini-cart-contents.js 22.7 kB
build/mini-cart-frontend.js 1.72 kB
build/mini-cart.js 6.1 kB
build/price-filter-frontend.js 12.5 kB
build/price-filter.js 8.72 kB
build/price-format.js 1.19 kB
build/product-add-to-cart--product-button--product-category-list--product-image--product-price--product-r--a0326d00.js 223 B
build/product-add-to-cart--product-button--product-image--product-title.js 2.65 kB
build/product-add-to-cart--product-button.js 565 B
build/product-add-to-cart-frontend.js 6.96 kB
build/product-add-to-cart.js 6.64 kB
build/product-best-sellers.js 7.42 kB
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 500 B
build/product-button-frontend.js 1.84 kB
build/product-button.js 1.08 kB
build/product-categories.js 2.78 kB
build/product-category-list-frontend.js 924 B
build/product-category-list.js 501 B
build/product-category.js 8.53 kB
build/product-image-frontend.js 1.84 kB
build/product-image.js 1.07 kB
build/product-new.js 7.71 kB
build/product-on-sale.js 8.03 kB
build/product-price-frontend.js 1.94 kB
build/product-price.js 1.5 kB
build/product-rating-frontend.js 1.15 kB
build/product-rating.js 732 B
build/product-sale-badge-frontend.js 1.09 kB
build/product-sale-badge.js 679 B
build/product-search.js 2.18 kB
build/product-sku-frontend.js 380 B
build/product-sku.js 381 B
build/product-stock-indicator-frontend.js 1.03 kB
build/product-stock-indicator.js 619 B
build/product-summary-frontend.js 1.33 kB
build/product-summary.js 919 B
build/product-tag-list-frontend.js 918 B
build/product-tag-list.js 497 B
build/product-tag.js 7.84 kB
build/product-title-frontend.js 1.3 kB
build/product-title.js 909 B
build/product-top-rated.js 7.95 kB
build/products-by-attribute.js 8.41 kB
build/reviews-by-category.js 11.2 kB
build/reviews-by-product.js 12.2 kB
build/reviews-frontend.js 7.02 kB
build/single-product-frontend.js 21.5 kB
build/single-product.js 10 kB
build/stock-filter-frontend.js 6.87 kB
build/stock-filter.js 6.93 kB
build/vendors--cart-blocks/cart-line-items--cart-blocks/cart-order-summary--cart-blocks/order-summary-shi--c02aad66-frontend.js 5.26 kB
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.14 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--5b8feb0b-frontend.js 4.75 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js 20.5 kB
build/vendors--mini-cart-contents-block/footer-frontend.js 6.86 kB
build/vendors--product-add-to-cart-frontend.js 7.53 kB
build/wc-blocks-data.js 9.87 kB
build/wc-blocks-editor-style-rtl.css 4.95 kB
build/wc-blocks-editor-style.css 4.95 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 930 B
build/wc-blocks-registry.js 2.7 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.14 kB
build/wc-blocks-style-rtl.css 22.2 kB
build/wc-blocks-style.css 22.2 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 71.4 kB
build/wc-blocks.js 2.63 kB
build/wc-payment-method-bacs.js 816 B
build/wc-payment-method-cheque.js 811 B
build/wc-payment-method-cod.js 909 B
build/wc-payment-method-paypal.js 837 B
build/wc-settings.js 2.61 kB

compressed-size-action

Copy link
Member

@alexflorisca alexflorisca left a comment

Choose a reason for hiding this comment

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

Look good, nice one 👍

@opr
Copy link
Contributor Author

opr commented May 18, 2022

Besides the translation ones, the E2E tests that fail in this PR pass locally, I'll merge notwithstanding.

@opr opr merged commit 5a2a979 into trunk May 18, 2022
@opr opr deleted the fix/state-country-wrong-values branch May 18, 2022 17:32
gigitux added a commit that referenced this pull request May 18, 2022
…ountry/state values being sent to the server (#6426)"

This reverts commit 5a2a979.
gigitux pushed a commit that referenced this pull request May 19, 2022
…tate values being sent to the server (#6426)

* Add requireExactMatch prop to ComboBox & only run onChange if value matches

* Set requireExactMatch to true for Country and State inputs

* Add unit tests for ComboBox

* Update expected value for onChange call

* Re-add autocomplete option to country input

* Use correct case for autoComplete in country input
gigitux pushed a commit that referenced this pull request May 19, 2022
…tate values being sent to the server (#6426)

* Add requireExactMatch prop to ComboBox & only run onChange if value matches

* Set requireExactMatch to true for Country and State inputs

* Add unit tests for ComboBox

* Update expected value for onChange call

* Re-add autocomplete option to country input

* Use correct case for autoComplete in country input
gigitux pushed a commit that referenced this pull request May 20, 2022
…tate values being sent to the server (#6426)

* Add requireExactMatch prop to ComboBox & only run onChange if value matches

* Set requireExactMatch to true for Country and State inputs

* Add unit tests for ComboBox

* Update expected value for onChange call

* Re-add autocomplete option to country input

* Use correct case for autoComplete in country input
gigitux added a commit that referenced this pull request May 20, 2022
don't splitChunk frontend scripts

simplfy output folders

reduce minimum chunk size to 10kb

add all inner blocks for loading

better splitChunks

update translation code

wait for scripts

try sleeping

fix loading translation

fix tests for mini cart

simplfy po logic

Add `requireExactMatch` prop to `ComboBox` to prevent wrong country/state values being sent to the server (#6426)

* Add requireExactMatch prop to ComboBox & only run onChange if value matches

* Set requireExactMatch to true for Country and State inputs

* Add unit tests for ComboBox

* Update expected value for onChange call

* Re-add autocomplete option to country input

* Use correct case for autoComplete in country input

Add `requireExactMatch` prop to `ComboBox` to prevent wrong country/state values being sent to the server (#6426)

* Add requireExactMatch prop to ComboBox & only run onChange if value matches

* Set requireExactMatch to true for Country and State inputs

* Add unit tests for ComboBox

* Update expected value for onChange call

* Re-add autocomplete option to country input

* Use correct case for autoComplete in country input

revert changes

skip broken test

add timeout

remove localstorage

check now

try

update test

try

click on label

remove fdescribe

Add `requireExactMatch` prop to `ComboBox` to prevent wrong country/state values being sent to the server (#6426)

* Add requireExactMatch prop to ComboBox & only run onChange if value matches

* Set requireExactMatch to true for Country and State inputs

* Add unit tests for ComboBox

* Update expected value for onChange call

* Re-add autocomplete option to country input

* Use correct case for autoComplete in country input

Add check to allow for value completion in combobox

Improve tests for combobox

add comment
opr added a commit that referenced this pull request May 24, 2022
…ountry/state values being sent to the server (#6426)"

This reverts commit 5a2a979.
danieldudzic pushed a commit that referenced this pull request May 24, 2022
…ountry/state values being sent to the server (#6426)" (#6447)

This reverts commit 5a2a979.
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. type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

StoreApi /wc/store/v1/cart/extensions endpoint resets the state to store default
2 participants