-
Notifications
You must be signed in to change notification settings - Fork 684
Description
Describe the bug
The sortCrumbs comparator function in the useBreadcrumbs talon uses the > operator instead of subtraction -, which can result in incorrect breadcrumb ordering.
// Current (incorrect)
const sortCrumbs = (a, b) => a.category_level > b.category_level;
// Should be
const sortCrumbs = (a, b) => a.category_level - b.category_level;The > operator returns a boolean (true/false) which coerces to 1 or 0. Since it never returns a negative number, Array.sort() cannot reliably determine when a should come before b, leading to unstable/incorrect sorting.
To reproduce
- Navigate to a category page with 3+ levels of nesting
- Observe the breadcrumb order
- Breadcrumbs may appear out of order depending on the original array order from the API
Expected behavior
Breadcrumbs should always be sorted in ascending order by category_level, displaying the correct hierarchy from root to current category.
Example input:
[
{ "category_level": 3, "text": "Category B", "path": "/category-a/category-b" },
{ "category_level": 4, "text": "Category C", "path": "/category-a/category-b/category-c" },
{ "category_level": 2, "text": "Category A", "path": "/category-a" }
]Actual: Unpredictable — may produce incorrect order such as Category B → Category A → Category C (levels 3, 2, 4) depending on input order.
Expected: Category A → Category B → Category C (levels 2, 3, 4)
Screenshots
N/A
Possible solutions
Change the comparator from boolean comparison to subtraction:
const sortCrumbs = (a, b) => a.category_level - b.category_level;This ensures the comparator returns:
Negative when a should come first
Zero when equal
Positive when b should come first
Debug Report
N/A
Please complete the following device information:
- Device [e.g. iPhone6, PC, Mac, Pixel3]: All
- Browser [e.g. Chrome, Safari]: All
- Browser Version [e.g. 22]: N/A
- Magento Version [e.g Adobe Commerce 2.4]: Magento Open Source 2.4.8-p3
Please let us know what packages this bug is in regards to:
-
venia-concept -
venia-ui -
pwa-buildpack -
peregrine -
pwa-devdocs -
upward-js -
upward-spec -
create-pwa