Repository navigation
fix: route WooCommerce order row clicks to separate windows. - #1030
Conversation
- WooCommerce's `wc-orders.js` binds a row-level click handler on order list tables (`admin.php?page=wc-orders` and `edit.php?post_type=shop_order`) that assigns `window.location = href` when clicking non-anchor cells (date, status, total, whitespace). In OpenStation, that in-place navigation replaces the Orders list window with the single order view, losing the list context. - Add `resolveOrderRowLink()` to intercept row clicks in the capture phase and route the destination through `os-iframe-admin-link` so the order opens in its own window beside the list. Explicitly exclude `.order-preview` when resolving the order link so the preceding modal preview button inside `.column-order_number` is not selected over `a.order-view`. - Halt event bubbling and prevent competing document handlers with `preventDefault()`, `stopPropagation()`, and `stopImmediatePropagation()`.
Add test coverage for row-level click interception in WooCommerce order tables: - Verify clicks on non-anchor cells (<time>, <mark>, <span>) resolve the order view link and dispatch `os-iframe-admin-link` with proper labels. - Verify interactive controls (bulk checkboxes, preview modal buttons) are ignored by the row interceptor. - Verify realistic HPOS table markup where `<a class="order-preview">` precedes `<a class="order-view">` in `.column-order_number`. - Verify non-order list tables (such as posts) are not intercepted. - Verify claimed navigation halts propagation to in-page listeners.
- Document the row-click navigation quirk in WooCommerce's `wc-orders.js` and how `resolveOrderRowLink()` in `src/chromeless-bridge.js` intercepts non-anchor clicks to open orders in separate windows beside the list.
|
Thanks a lot @KarunyaChavan, great digging into Two things before merging. First, clicking a header cell that isn't a link (e.g. "Status") now re-sorts the list. var cell = target.closest( '.post-type-shop_order .wp-list-table tbody td, .woocommerce_page_wc-orders .wp-list-table.orders tbody td' );
var view = cell && cell.closest( 'tr' ).querySelector( 'a.order-view' );Second, the new |
…gation - Scope order row cell lookup to tbody (both td and th) across HPOS and legacy CPT tables so non-link header clicks (e.g. Status) do not match the header row or resolve the column sort link. - Query strictly for `a.order-view`, matching WooCommerce's own handler. - Support clicking whitespace and small-screen elements in the primary th (`th.column-order_number`), while ignoring the responsive `.toggle-row` button. - Limit `stopPropagation()` and `stopImmediatePropagation()` strictly to claimed order row clicks (`isOrderRowClick`), allowing ordinary admin, other-admin, and external links to bubble to in-page listeners. - Add test coverage for header clicks, primary th clicks, and event propagation isolation.
|
Thank you for the review @epeicher 🙇 I've updated the row lookup to target only tbody cells and WooCommerce's order-view link, preventing header clicks from triggering sorting. I've also limited event propagation blocking to actual order row clicks so other links behave normally. |
…rks now Quote WooCommerce's real selectors (body td and th on both list tables), list every control the interceptor yields to, note that header cells are never claimed and that only a claimed row click stops propagation, and say that table.wc-orders-list-table also reaches other HPOS order types' lists.
epeicher
left a comment
There was a problem hiding this comment.
Thanks @KarunyaChavan for addressing the comments! I have added a small commit to update the docs and reviewed the changes. They LGTM!
This PR fixes an issue where clicking anywhere on a WooCommerce order table row outside of the primary order number link (such as on the date, order status badge, order total, or empty cell whitespace) caused the order to open inside the current Orders list window instead of in a separate window.
See #1022
What was Happening ?
wc-orders.jsbinds a row-level delegated click handler that assignswindow.location = href, which previously bypassed OpenStation's anchor interceptor and wiped out the Orders list context in place.What Changed ?
src/chromeless-bridge.js:resolveOrderRowLink(): Introduced a helper that maps clicks on non-anchor order row cells to the row's primary order edit link (a.order-view,.column-order_number a)..woocommerce_page_wc-orders table,.post-type-shop_order table, ortable.wc-orders-list-table), preventing false positives on unrelated admin list tables..order-preview), the actions column (.wc_actions), and active user text selections.e.stopPropagation()ande.stopImmediatePropagation()alongsidee.preventDefault()when claiming admin links so WooCommerce's bubble-phase handler cannot executewindow.location = href.tests/vitest/chromeless-bridge-links.test.ts:<time>,<mark>,<span>) in an order row dispatchos-iframe-admin-linkto open the order in a new window.docs/plugin-compat-layer.md:wc-orders.jsand how OpenStation resolves it in the compatibility layer.3) Steps for Testing
Open OpenStation and launch the WooCommerce > Orders window:
#1042 John Doe) - verify that the single order opens in a new window beside the list.Use of AI: