fix(cdk/listbox): improve SSR compatibility by adding an _isBrowser c…

…heck before calling _setPreviousActiveOptionAsActiveOptionOnWindowBlur (#28746)

* Add _isBrowser check before calling _setPreviousActiveOptionAsActiveOptionOnWindowBlur

* add basic example for cdk listbox

(cherry picked from commit 9c4e451)

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<T = unknown> 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<T>) => option.disabled;
 
@@ -415,7 +419,9 @@ export class CdkListbox<T = unknown> implements AfterContentInit, OnDestroy, Con
   private _previousActiveOption: CdkOption<T> | null = null;
 
   constructor() {
-    this._setPreviousActiveOptionAsActiveOptionOnWindowBlur();
+    if (this._isBrowser) {
+      this._setPreviousActiveOptionAsActiveOptionOnWindowBlur();
+    }
   }
 
   ngAfterContentInit() {

src/universal-app/kitchen-sink/kitchen-sink.html

@@ -488,6 +488,15 @@ <h2>Native table with sticky header and footer</h2>
   <tr mat-footer-row *matFooterRowDef="tableColumns; sticky: true"></tr>
 </table>
 
+<h2>CDK Listbox</h2>
+<div class="test-cdk-listbox">
+  <label>Favorite color</label>
+  <ul cdkListbox>
+    <li cdkOption="red">Red</li>
+    <li cdkOption="green">Green</li>
+    <li cdkOption="blue">Blue</li>
+  </ul>
+</div>
 
 <h2>Selection list</h2>
 <mat-selection-list>

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,