diff --git a/src/cdk/listbox/listbox.ts b/src/cdk/listbox/listbox.ts index f81e19e334a4..3b7b81076aef 100644 --- a/src/cdk/listbox/listbox.ts +++ b/src/cdk/listbox/listbox.ts @@ -40,6 +40,7 @@ import {defer, fromEvent, merge, Observable, Subject} from 'rxjs'; import {filter, map, startWith, switchMap, takeUntil} from 'rxjs/operators'; import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms'; import {Directionality} from '@angular/cdk/bidi'; +import {Platform} from '@angular/cdk/platform'; /** The next id to use for creating unique DOM IDs. */ let nextId = 0; @@ -402,6 +403,9 @@ export class CdkListbox implements AfterContentInit, OnDestroy, Con /** The directionality of the page. */ private readonly _dir = inject(Directionality, {optional: true}); + /** Whether the component is being rendered in the browser. */ + private readonly _isBrowser: boolean = inject(Platform).isBrowser; + /** A predicate that skips disabled options. */ private readonly _skipDisabledPredicate = (option: CdkOption) => option.disabled; @@ -415,7 +419,9 @@ export class CdkListbox implements AfterContentInit, OnDestroy, Con private _previousActiveOption: CdkOption | null = null; constructor() { - this._setPreviousActiveOptionAsActiveOptionOnWindowBlur(); + if (this._isBrowser) { + this._setPreviousActiveOptionAsActiveOptionOnWindowBlur(); + } } ngAfterContentInit() { diff --git a/src/universal-app/kitchen-sink/kitchen-sink.html b/src/universal-app/kitchen-sink/kitchen-sink.html index eb4aa95f1502..d0cca982d15f 100644 --- a/src/universal-app/kitchen-sink/kitchen-sink.html +++ b/src/universal-app/kitchen-sink/kitchen-sink.html @@ -488,6 +488,15 @@

Native table with sticky header and footer

+

CDK Listbox

+
+ +
    +
  • Red
  • +
  • Green
  • +
  • Blue
  • +
+

Selection list

diff --git a/src/universal-app/kitchen-sink/kitchen-sink.ts b/src/universal-app/kitchen-sink/kitchen-sink.ts index 16249af857e0..3b5fa3cdcfd2 100644 --- a/src/universal-app/kitchen-sink/kitchen-sink.ts +++ b/src/universal-app/kitchen-sink/kitchen-sink.ts @@ -1,5 +1,6 @@ import {A11yModule, FocusMonitor} from '@angular/cdk/a11y'; import {DragDropModule} from '@angular/cdk/drag-drop'; +import {CdkListboxModule} from '@angular/cdk/listbox'; import {ScrollingModule, ViewportRuler} from '@angular/cdk/scrolling'; import {CdkTableModule, DataSource} from '@angular/cdk/table'; import {Component, ElementRef, InjectionToken, inject} from '@angular/core'; @@ -95,6 +96,37 @@ export class TestEntryComponent {} border: 1px solid black; } + .test-cdk-listbox { + display: block; + width: 100%; + + > label { + display: block; + padding: 5px; + } + + > ul { + list-style: none; + padding: 0; + margin: 0; + + > li { + position: relative; + padding: 5px 5px 5px 25px; + + &:focus { + background: rgba(0, 0, 0, 0.2); + } + + &[aria-selected='true']::before { + content: "✔"; + position: absolute; + left: 2px; + } + } + } + } + .test-cdk-table { display: table; width: 100%; @@ -146,6 +178,7 @@ export class TestEntryComponent {} ScrollingModule, // CDK Modules + CdkListboxModule, CdkTableModule, DragDropModule, A11yModule,