Commit 16024fd1f0e for woocommerce
commit 16024fd1f0ee685e3cff26f56a96415dfabe9c84
Author: Benito Alba Molina <albamolina.benito@gmail.com>
Date: Wed Aug 26 10:51:11 2026 +0200
Open product search when adding order items (#66905)
* Open product search when adding order items
* Add changelog entry for order product search focus
* Update order product picker E2E flows
* Update order coupon E2E for auto-opened product picker
---------
Co-authored-by: benitoalba <benitoalba@users.noreply.github.com>
Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com>
diff --git a/plugins/woocommerce/changelog/30996-focus-product-search b/plugins/woocommerce/changelog/30996-focus-product-search
new file mode 100644
index 00000000000..1c96351efdb
--- /dev/null
+++ b/plugins/woocommerce/changelog/30996-focus-product-search
@@ -0,0 +1,4 @@
+Significance: patch
+Type: enhancement
+
+Open the product picker automatically when adding products to an order, so merchants can start typing without an extra click.
diff --git a/plugins/woocommerce/client/legacy/js/admin/meta-boxes-order.js b/plugins/woocommerce/client/legacy/js/admin/meta-boxes-order.js
index c3454033e2d..ae2e1a11985 100644
--- a/plugins/woocommerce/client/legacy/js/admin/meta-boxes-order.js
+++ b/plugins/woocommerce/client/legacy/js/admin/meta-boxes-order.js
@@ -1216,6 +1216,14 @@ jQuery( function ( $ ) {
if ( 'wc-modal-add-products' === target ) {
$( document.body ).trigger( 'wc-enhanced-select-init' );
+ var $productSearch = $( '#wc-backbone-modal-dialog' )
+ .find( '.wc-product-search' )
+ .first();
+
+ if ( $productSearch.length ) {
+ $productSearch.selectWoo( 'open' );
+ }
+
$( this ).on( 'change', '.wc-product-search', function() {
if ( ! $( this ).closest( 'tr' ).is( ':last-child' ) ) {
return;
diff --git a/plugins/woocommerce/tests/e2e/tests/order/create-order.spec.ts b/plugins/woocommerce/tests/e2e/tests/order/create-order.spec.ts
index 7a5f868c666..752fc5c763b 100644
--- a/plugins/woocommerce/tests/e2e/tests/order/create-order.spec.ts
+++ b/plugins/woocommerce/tests/e2e/tests/order/create-order.spec.ts
@@ -55,7 +55,6 @@ async function getOrderIdFromPage( page: Page ) {
async function addProductToOrder( page: Page, product, quantity: number ) {
await page.getByRole( 'button', { name: 'Add item(s)' } ).click();
await page.getByRole( 'button', { name: 'Add product(s)' } ).click();
- await page.getByText( 'Search for a product…' ).click();
await page.locator( 'span > .select2-search__field' ).fill( product.name );
await page.getByRole( 'option', { name: product.name } ).first().click();
@@ -421,7 +420,7 @@ test.describe(
).toBeVisible();
} );
- test( 'can add a product using the keyboard without a rogue search box', async ( {
+ test( 'can add a product without an extra click or rogue search box', async ( {
page,
simpleProduct,
} ) => {
@@ -436,6 +435,15 @@ test.describe(
const modal = page.locator( '.wc-backbone-modal-content' );
await expect( modal ).toBeVisible();
+ const productSearch = page.locator(
+ 'span > .select2-search__field'
+ );
+ await expect( productSearch ).toBeFocused();
+
+ // Close the automatically opened search so the existing keyboard
+ // regression still exercises opening the control with Enter.
+ await page.keyboard.press( 'Escape' );
+
// Focus the (closed) product-search control and press Enter.
// Before the fix this submitted the modal, closing it and
// stranding a detached selectWoo dropdown at the top-left of the
@@ -453,9 +461,7 @@ test.describe(
// dropdown; type the query, wait for the result, then press Enter to
// choose it with the keyboard (results are loaded first, so this is
// not the premature-Enter path).
- await page
- .locator( 'span > .select2-search__field' )
- .fill( simpleProduct.name );
+ await productSearch.fill( simpleProduct.name );
await page
.getByRole( 'option', { name: simpleProduct.name } )
.first()
@@ -593,13 +599,15 @@ test.describe(
await page.locator( 'button.add-order-item' ).click();
// search for each product to add
- for ( const product of [
+ for ( const [ index, product ] of [
simpleProduct,
variableProduct,
groupedProduct,
externalProduct,
- ] ) {
- await page.getByText( 'Search for a product…' ).click();
+ ].entries() ) {
+ if ( index > 0 ) {
+ await page.getByText( 'Search for a product…' ).click();
+ }
await page
.locator( 'span > .select2-search__field' )
.fill( product.name );
diff --git a/plugins/woocommerce/tests/e2e/tests/order/order-coupon.spec.ts b/plugins/woocommerce/tests/e2e/tests/order/order-coupon.spec.ts
index 7dff6532d2a..858f7fdd809 100644
--- a/plugins/woocommerce/tests/e2e/tests/order/order-coupon.spec.ts
+++ b/plugins/woocommerce/tests/e2e/tests/order/order-coupon.spec.ts
@@ -85,7 +85,6 @@ test.describe(
await page.locator( 'button.add-order-item' ).click();
// search for product to add
- await page.locator( 'text=Search for a product…' ).click();
await page
.locator( '.select2-search--dropdown' )
.getByRole( 'combobox' )