diff --git a/src/elements/breadcrumb/breadcrumb-group/breadcrumb-group.spec.ts b/src/elements/breadcrumb/breadcrumb-group/breadcrumb-group.spec.ts
index 650a52d503..9bbc263ff6 100644
--- a/src/elements/breadcrumb/breadcrumb-group/breadcrumb-group.spec.ts
+++ b/src/elements/breadcrumb/breadcrumb-group/breadcrumb-group.spec.ts
@@ -1,9 +1,9 @@
-import { assert, expect } from '@open-wc/testing';
+import { assert, aTimeout, expect } from '@open-wc/testing';
import { sendKeys, setViewport } from '@web/test-runner-commands';
import { html } from 'lit/static-html.js';
import { fixture } from '../../core/testing/private.js';
-import { waitForCondition, EventSpy, waitForLitRender } from '../../core/testing.js';
+import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing.js';
import type { SbbBreadcrumbElement } from '../breadcrumb.js';
import { SbbBreadcrumbGroupElement } from './breadcrumb-group.js';
@@ -14,33 +14,59 @@ describe(`sbb-breadcrumb-group`, () => {
describe('without ellipsis', () => {
let element: SbbBreadcrumbGroupElement;
- beforeEach(async () => {
- element = await fixture(html`
-
-
- One
- Two
-
- `);
- });
-
- it('renders', async () => {
- assert.instanceOf(element, SbbBreadcrumbGroupElement);
+ describe('with three breadcrumbs', () => {
+ beforeEach(async () => {
+ element = await fixture(html`
+
+
+ One
+ Two
+
+ `);
+ });
+
+ it('renders', async () => {
+ assert.instanceOf(element, SbbBreadcrumbGroupElement);
+ });
+
+ it('keyboard navigation', async () => {
+ const first: SbbBreadcrumbElement =
+ element.querySelector('#breadcrumb-0')!;
+ const second: SbbBreadcrumbElement =
+ element.querySelector('#breadcrumb-1')!;
+ const third: SbbBreadcrumbElement =
+ element.querySelector('#breadcrumb-2')!;
+
+ first.focus();
+ await sendKeys({ down: 'ArrowRight' });
+ expect(document.activeElement!.id).to.be.equal(second.id);
+ await sendKeys({ down: 'ArrowRight' });
+ expect(document.activeElement!.id).to.be.equal(third.id);
+ });
});
- it('keyboard navigation', async () => {
- const first: SbbBreadcrumbElement =
- element.querySelector('#breadcrumb-0')!;
- const second: SbbBreadcrumbElement =
- element.querySelector('#breadcrumb-1')!;
- const third: SbbBreadcrumbElement =
- element.querySelector('#breadcrumb-2')!;
-
- first.focus();
- await sendKeys({ down: 'ArrowRight' });
- expect(document.activeElement!.id).to.be.equal(second.id);
- await sendKeys({ down: 'ArrowRight' });
- expect(document.activeElement!.id).to.be.equal(third.id);
+ describe('with two breadcrumns', () => {
+ beforeEach(async () => {
+ element = await fixture(html`
+
+ Level 0
+ Level 1
+
+ `);
+ });
+
+ it('should not collapse', async () => {
+ await setViewport({ width: 80, height: 1000 });
+ await waitForLitRender(element);
+ // We need to ensure that the collapsed state is really rendered
+ await aTimeout(20);
+
+ const ellipsisButton = element.shadowRoot!.querySelector(
+ '#sbb-breadcrumb-ellipsis',
+ )!;
+
+ expect(ellipsisButton).to.be.null;
+ });
});
});
diff --git a/src/elements/breadcrumb/breadcrumb-group/breadcrumb-group.ts b/src/elements/breadcrumb/breadcrumb-group/breadcrumb-group.ts
index 2143dd4547..b31709d199 100644
--- a/src/elements/breadcrumb/breadcrumb-group/breadcrumb-group.ts
+++ b/src/elements/breadcrumb/breadcrumb-group/breadcrumb-group.ts
@@ -25,6 +25,8 @@ import style from './breadcrumb-group.scss?lit&inline';
import '../../icon.js';
+const MIN_BREADCRUMBS_TO_COLLAPSE = 3;
+
/**
* It can be used as a container for one or more `sbb-breadcrumb` component.
*
@@ -119,7 +121,7 @@ export class SbbBreadcrumbGroupElement extends SbbNamedSlotListMixin<
this.listChildren[this.listChildren.length - 1]?.setAttribute('aria-current', 'page');
// If it is not expandable, reset state
- if (this.listChildren.length < 3) {
+ if (this.listChildren.length < MIN_BREADCRUMBS_TO_COLLAPSE) {
this._state = null;
}
}
@@ -159,7 +161,11 @@ export class SbbBreadcrumbGroupElement extends SbbNamedSlotListMixin<
/** Evaluate if the expanded breadcrumb element fits in page width, otherwise it needs ellipsis */
private _evaluateCollapsedState(): void {
- if (!this._state && this.scrollWidth > this.offsetWidth) {
+ if (
+ !this._state &&
+ this.scrollWidth > this.offsetWidth &&
+ this.listChildren.length >= MIN_BREADCRUMBS_TO_COLLAPSE
+ ) {
this._state = 'collapsed';
this._resizeObserver.disconnect();
}