search

Automattic / woocommerce-payments

Accept payments via credit card. Manage transactions within WordPress.
https://wordpress.org/plugins/woocommerce-payments/
Other
174 stars 69 forks source link

[GlobalStep] Unable to remove the last searched item in the search bar on "Payment > Transactions" page. #9071

Closed gglobalstep closed 4 months ago

gglobalstep commented 4 months ago

Bug Description:

Unable to remove the last searched item in the search bar on "Payment > Transactions" page.

Environment:

Woocommerce Version : WooCommerce 9.0.2 WooCommerce Payments - 7.9.0-test-3 WordPress version: v6.6 RC2

PC:

Windows 10 Chrome (Version 126.0.6478.127) Firefox (Version 127.0.2)

Steps To Reproduce:

  1. Create any test site.
  2. Install and activate all the required plugins.
  3. Upload and activate the WooCommerce Payments v7.9.0-test-3 plugin.
  4. Complete the setup wizard.
  5. Complete the KYC flow.
  6. Create few orders.
  7. As a Merchant, navigate to 'Payments -> Transactions'.
  8. Remove the search element content and type in an order number, wait for autocompletion and click the value it suggests (e.g. 'Order #001')
  9. Add one or more order value in search element content
  10. Now try to remove the last order in the list.
  11. Observe that, you are unable to remove the last searched item in the search bar.

Instruction Link:

https://github.com/Automattic/woocommerce-payments/wiki/Testing-instructions-for-critical-flows#search-transactions

Actual Result:

Unable to remove the last searched item in the search bar on "Payment > Transactions" page.

Expected Result:

Last searched item should be removed after clinking close button in the search bar on "Payment > Transactions" page.

Video:

https://github.com/Automattic/woocommerce-payments/assets/41110392/5830f5b6-9a9e-424f-ad29-2f5bdb859263

Isolating the problem (mark completed items with an [x]):

System Status Report ``` ### WordPress Environment ### WordPress address (URL): [Redacted] Site address (URL): [Redacted] WC Version: 9.0.2 Legacy REST API Package Version: The Legacy REST API plugin is not installed on this site. Action Scheduler Version: ✔ 3.7.4 Log Directory Writable: ✔ WP Version: 6.6-RC2 WP Multisite: – WP Memory Limit: 512 MB WP Debug Mode: – WP Cron: ✔ Language: en_US External object cache: ✔ ### Server Environment ### Server Info: nginx PHP Version: 8.1.29 PHP Post Max Size: 2 GB PHP Time Limit: 1200 PHP Max Input Vars: 6144 cURL Version: 8.7.1 OpenSSL/3.0.11 SUHOSIN Installed: – MySQL Version: 10.6.18-MariaDB-log Max Upload Size: 2 GB Default Timezone is UTC: ✔ fsockopen/cURL: ✔ SoapClient: ✔ DOMDocument: ✔ GZip: ✔ Multibyte String: ✔ Remote Post: ✔ Remote Get: ✔ ### Database ### [REDACTED] ### Post Type Counts ### attachment: 25 page: 9 post: 2 product: 24 product_variation: 7 revision: 2 shop_coupon: 1 shop_order_placehold: 77 wp_global_styles: 1 wp_navigation: 1 ### Security ### Secure connection (HTTPS): ✔ Hide errors from visitors: ✔ ### Active Plugins (5) ### Query Monitor: by John Blackbourn – 3.16.3 Akismet Anti-spam: Spam Protection: by Automattic - Anti-spam Team – 5.3.2 Code Snippets: by Code Snippets Pro – 3.6.5.1 WooPayments: by WooCommerce – 7.9.0-test-3 WooCommerce: by Automattic – 9.0.2 ### Inactive Plugins (2) ### WooCommerce Payments Dev Tools: by Automattic – WooCommerce Subscriptions: by WooCommerce – 6.4.1 ### Dropin Plugins () ### advanced-cache.php: advanced-cache.php db.php: Query Monitor Database Class (Drop-in) object-cache.php: Memcached ### Must Use Plugins (1) ### load.php: by – ### Settings ### API Enabled: – Force SSL: – Currency: USD ($) Currency Position: left Thousand Separator: , Decimal Separator: . Number of Decimals: 2 Taxonomies: Product Types: external (external) grouped (grouped) simple (simple) subscription (subscription) variable (variable) variable subscription (variable-subscription) Taxonomies: Product Visibility: exclude-from-catalog (exclude-from-catalog) exclude-from-search (exclude-from-search) featured (featured) outofstock (outofstock) rated-1 (rated-1) rated-2 (rated-2) rated-3 (rated-3) rated-4 (rated-4) rated-5 (rated-5) Connected to WooCommerce.com: – Enforce Approved Product Download Directories: ✔ HPOS feature enabled: ✔ Order datastore: Automattic\WooCommerce\Internal\DataStores\Orders\OrdersTableDataStore HPOS data sync enabled: – ### Logging ### Enabled: ✔ Handler: Automattic\WooCommerce\Internal\Admin\Logging\LogHandlerFileV2 Retention period: 30 days Level threshold: – Log directory size: 5 MB ### WC Pages ### Shop base: #5 - /shop/ Cart: #6 - /cart/ Checkout: #7 - /checkout/ My account: #8 - /my-account/ Terms and conditions: ❌ Page not set ### Theme ### Name: Storefront Version: 4.6.0 Author URL: https://woocommerce.com/ Child Theme: ❌ – If you are modifying WooCommerce on a parent theme that you did not build personally we recommend using a child theme. See: How to create a child theme WooCommerce Support: ✔ ### Templates ### Overrides: – ### WooPayments ### Version: 7.9.0-test-3 Connected to WPCOM: Yes WPCOM Blog ID: 234959411 Account ID: acct_1PaasECDW6dLyTV2 Payment Gateway: Enabled Test Mode: Enabled Enabled APMs: card WooPay: Disabled WooPay Incompatible Extensions: No Apple Pay / Google Pay: Enabled (product,cart,checkout) Fraud Protection Level: basic Multi-currency: Enabled Auth and Capture: Enabled Documents: Disabled Logging: Enabled ### Admin ### Enabled Features: activity-panels analytics product-block-editor coupons core-profiler customize-store customer-effort-score-tracks import-products-task experimental-fashion-sample-products shipping-smart-defaults shipping-setting-tour homescreen marketing mobile-app-banner navigation onboarding onboarding-tasks product-custom-fields remote-inbox-notifications remote-free-extensions payment-gateway-suggestions shipping-label-banner subscriptions store-alerts transient-notices woo-mobile-welcome wc-pay-promotion wc-pay-welcome-page Disabled Features: minified-js new-product-management-experience pattern-toolkit-full-composability product-pre-publish-modal settings async-product-editor-category-field launch-your-store product-editor-template-system Daily Cron: ✔ Next scheduled: 2024-07-10 09:04:22 +00:00 Options: ✔ Notes: 66 Onboarding: skipped ### Action Scheduler ### Complete: 484 Oldest: 2024-07-09 09:05:49 +0000 Newest: 2024-07-09 12:14:11 +0000 Pending: 23 Oldest: 2024-07-09 15:21:45 +0000 Newest: 2024-09-09 12:15:21 +0000 Failed: 2 Oldest: 2024-07-09 10:06:21 +0000 Newest: 2024-07-09 14:46:06 +0000 Canceled: 27 Oldest: 2024-07-09 10:15:32 +0000 Newest: 2024-07-09 14:48:22 +0000 ### Status report information ### Generated at: 2024-07-09 15:20:54 +00:00 ```
jessepearson commented 4 months ago

It seems this is caused by this change here: https://github.com/Automattic/woocommerce-payments/pull/8996/files#diff-99c214f1dd5794a3ed23d9c5edf20182288d8199991c630481b01827d7132723R175-R186

The ::after element overlaps the X button on the last item in the list making it so it cannot be clicked on.

nagpai commented 4 months ago

Thanks for creating the issue, @jessepearson 🙌🏼 . I am bumping up the priority to medium, since it will be more obvious when we have our Payment activity widget released to all merchants.

I will take a look at this.

Jinksi commented 4 months ago

Unable to remove the last searched item in the search bar on "Payment > Transactions" page.

Note that there is a workaround for removing tags (although not ideal) – merchants can use the backspace/delete key, or the X "clear" button on mobile.

nagpai commented 4 months ago

Some additional context on why this regression was caused.

There was a fading gradient added to the end of tags container within the transactions report search box. This was added to indicate there are more tags beyond what the box can hold. This gradient was tied to the tags container that fits tightly to the available containers, hence it ended up showing on the last tag, even if there were fewer tags. Further, the gradient prevented the last tag's close button from being clicked.

nagpai commented 4 months ago

Fixed via #9072 ! Thanks, @gglobalstep , @jessepearson 🙌🏼