Skip to content

[bug] Breadcrumbs sortCrumbs function uses > instead of -, causing unreliable sort order #4591

@Niki-Tester

Description

@Niki-Tester

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

  1. Navigate to a category page with 3+ levels of nesting
  2. Observe the breadcrumb order
  3. 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

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions