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

Conversation

@sunyatasattva
Copy link
Contributor

This PR fixes an issue where the SearchListControl component (for example, used in the Hand-picked Products block) would render the search results list with highlighted text borrowing the case from the user's input instead of the original item's name. So, if the original item's name was Hoodie, but the user's input was hOoDiE, search results would display the latter, rather than the former.

Search still is case insensitive, but preserves the original item's case.

Also, this PR adds a test for this bug and fixes a previous test case which wasn't actually testing for this at all.

Fixes #6524

Screenshots

Before After
172268138-7445fbf1-ad25-4716-8b5a-ee4b463af54b Screenshot 2022-06-11 at 21 16 42

Testing

Automated Tests

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

User Facing Testing

  1. Add a “Hand-picked Products” block to your page.
  2. Type the name of one of your products with the incorrect case (e.g. if you have imported the sample data, type “hOoDiE”.
  3. Make sure all matching products appear on the list.
  4. Make sure all items on the list preserve their original case.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Performance Impact

Changelog

Fixes an issue where search lists would not preserve the case of the original item.

@sunyatasattva sunyatasattva added type: bug The issue/PR concerns a confirmed bug. block: hand-picked products Issues related to the Hand-picked Products block. category: tests labels Jun 11, 2022
@sunyatasattva sunyatasattva self-assigned this Jun 11, 2022
@rubikuserbot rubikuserbot requested review from a team and tomasztunik and removed request for a team June 11, 2022 19:25
@github-actions
Copy link
Contributor

Script Dependencies Report

The compare-assets action has detected some changed script dependencies between this branch and trunk. Please review and confirm the following are correct before merging.

Script Handle Added Removed
product-best-sellers.js react ⚠️
product-category.js react ⚠️
product-new.js react ⚠️
product-on-sale.js react ⚠️
product-top-rated.js react ⚠️
products-by-attribute.js react ⚠️
product-tag.js react ⚠️

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

@github-actions
Copy link
Contributor

github-actions bot commented Jun 11, 2022

Size Change: +102 B (0%)

Total Size: 873 kB

Filename Size Change
build/all-products.js 33.5 kB +13 B (0%)
build/attribute-filter.js 14.4 kB +9 B (0%)
build/featured-category.js 13.2 kB +8 B (0%)
build/featured-product.js 13.5 kB +9 B (0%)
build/handpicked-products.js 7.38 kB +3 B (0%)
build/product-best-sellers.js 7.71 kB +6 B (0%)
build/product-category.js 8.69 kB +3 B (0%)
build/product-new.js 7.72 kB +7 B (0%)
build/product-on-sale.js 8.04 kB +2 B (0%)
build/product-tag.js 8.09 kB +9 B (0%)
build/product-top-rated.js 7.96 kB +7 B (0%)
build/products-by-attribute.js 8.64 kB +5 B (0%)
build/reviews-by-category.js 11.2 kB +9 B (0%)
build/reviews-by-product.js 12.3 kB +8 B (0%)
build/single-product.js 10 kB +4 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.34 kB
build/active-filters.js 8 kB
build/all-products-frontend.js 18.1 kB
build/all-reviews.js 7.8 kB
build/attribute-filter-frontend.js 25.1 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.07 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 430 B
build/cart-blocks/cart-order-summary-frontend.js 1.11 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 782 B
build/cart-blocks/order-summary-coupon-form-frontend.js 2.62 kB
build/cart-blocks/order-summary-discount-frontend.js 2.12 kB
build/cart-blocks/order-summary-fee-frontend.js 273 B
build/cart-blocks/order-summary-heading-frontend.js 455 B
build/cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping-frontend.js 6.34 kB
build/cart-blocks/order-summary-shipping-frontend.js 428 B
build/cart-blocks/order-summary-subtotal-frontend.js 274 B
build/cart-blocks/order-summary-taxes-frontend.js 434 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.16 kB
build/cart-frontend.js 45.6 kB
build/cart.js 44.2 kB
build/checkout-blocks/actions-frontend.js 1.41 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.12 kB
build/checkout-blocks/billing-address-frontend.js 890 B
build/checkout-blocks/contact-information-frontend.js 2.83 kB
build/checkout-blocks/express-payment-frontend.js 5.36 kB
build/checkout-blocks/fields-frontend.js 345 B
build/checkout-blocks/order-note-frontend.js 1.08 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.67 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 2.78 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.25 kB
build/checkout-blocks/order-summary-fee-frontend.js 276 B
build/checkout-blocks/order-summary-frontend.js 1.11 kB
build/checkout-blocks/order-summary-shipping-frontend.js 604 B
build/checkout-blocks/order-summary-subtotal-frontend.js 274 B
build/checkout-blocks/order-summary-taxes-frontend.js 433 B
build/checkout-blocks/payment-frontend.js 7.67 kB
build/checkout-blocks/shipping-address-frontend.js 991 B
build/checkout-blocks/shipping-methods-frontend.js 4.72 kB
build/checkout-blocks/terms-frontend.js 1.22 kB
build/checkout-blocks/totals-frontend.js 326 B
build/checkout-frontend.js 47.9 kB
build/checkout.js 45.4 kB
build/legacy-template.js 2.8 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 229 B
build/mini-cart-contents-block/footer--mini-cart-contents-block/products-table-frontend.js 4.68 kB
build/mini-cart-contents-block/footer-frontend.js 5.75 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 288 B
build/mini-cart-contents-block/title-frontend.js 367 B
build/mini-cart-contents.js 22.9 kB
build/mini-cart-frontend.js 1.72 kB
build/mini-cart.js 6.62 kB
build/price-filter-frontend.js 13.1 kB
build/price-filter.js 9.04 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 564 B
build/product-add-to-cart-frontend.js 6.96 kB
build/product-add-to-cart.js 6.63 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.85 kB
build/product-button.js 1.09 kB
build/product-categories.js 2.78 kB
build/product-category-list-frontend.js 921 B
build/product-category-list.js 502 B
build/product-image-frontend.js 1.84 kB
build/product-image.js 1.08 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 730 B
build/product-sale-badge-frontend.js 1.09 kB
build/product-sale-badge.js 680 B
build/product-search.js 2.18 kB
build/product-sku-frontend.js 380 B
build/product-sku.js 382 B
build/product-stock-indicator-frontend.js 1.03 kB
build/product-stock-indicator.js 621 B
build/product-summary-frontend.js 1.33 kB
build/product-summary.js 917 B
build/product-tag-list-frontend.js 915 B
build/product-tag-list.js 496 B
build/product-title-frontend.js 1.29 kB
build/product-title.js 911 B
build/reviews-frontend.js 7.02 kB
build/single-product-frontend.js 21.4 kB
build/stock-filter-frontend.js 7.39 kB
build/stock-filter.js 7.3 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.74 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js 19.1 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 5.04 kB
build/wc-blocks-editor-style.css 5.04 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.1 kB
build/wc-blocks-style.css 22 kB
build/wc-blocks-vendors-style-rtl.css 1.26 kB
build/wc-blocks-vendors-style.css 1.26 kB
build/wc-blocks-vendors.js 58.8 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.6 kB

compressed-size-action

Copy link
Contributor

@Aljullu Aljullu 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 testing well and code looks good, thanks for fixing this @sunyatasattva!

I'm pre-approving, but I left a comment about whether we should import from react or from @wordpress/element. It looks like the way this PR is done, it's currently adding the react dependency to several scripts.

* External dependencies
*/
import { groupBy, keyBy } from 'lodash';
import { Fragment } from 'react';
Copy link
Contributor

Choose a reason for hiding this comment

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

I'm a bit confused by this now, but I thought we always wanted to prioritize importing from @wordpress/element instead of react.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Oh thanks for pointing that out @Aljullu! I wasn't aware of that. Perhaps it's something we could write somewhere? Team Handbook? READMEs?

I'll fix it and merge it! Thanks for the review! 🙏

Copy link
Contributor

Choose a reason for hiding this comment

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

Oh thanks for pointing that out @Aljullu! I wasn't aware of that. Perhaps it's something we could write somewhere? Team Handbook? READMEs?

Sounds good, I agree. Is that something you can own or create an issue with the documentation label?

Searches would keep the case of the user input
instead of the original case of the name.
@sunyatasattva sunyatasattva force-pushed the fix/6524-search-list-control-preserving-input-case branch from b461883 to afce2fd Compare July 21, 2022 19:26
@sunyatasattva sunyatasattva merged commit 61ff702 into trunk Jul 21, 2022
@sunyatasattva sunyatasattva deleted the fix/6524-search-list-control-preserving-input-case branch July 21, 2022 19:49
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

block: hand-picked products Issues related to the Hand-picked Products block. type: bug The issue/PR concerns a confirmed bug.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

SearchListControl shows product names in the same case the user entered.

4 participants