Skip to content

Commit 55268a2

Browse files
committed
refactor(cdk/listbox): use ID generator
Switches to using the ID generator service to create unique IDs.
1 parent 746b110 commit 55268a2

File tree

2 files changed

+10
-8
lines changed

2 files changed

+10
-8
lines changed

src/cdk/listbox/listbox.spec.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,10 +45,10 @@ describe('CdkOption and CdkListbox', () => {
4545
expect(optionIds.size).toBe(options.length);
4646
for (let i = 0; i < options.length; i++) {
4747
expect(options[i].id).toBe(optionEls[i].id);
48-
expect(options[i].id).toMatch(/cdk-option-\d+/);
48+
expect(options[i].id).toMatch(/cdk-option-\w+\d+/);
4949
}
5050
expect(listbox.id).toEqual(listboxEl.id);
51-
expect(listbox.id).toMatch(/cdk-listbox-\d+/);
51+
expect(listbox.id).toMatch(/cdk-listbox-\w+\d+/);
5252
});
5353

5454
it('should not overwrite user given ids', () => {

src/cdk/listbox/listbox.ts

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,12 @@
66
* found in the LICENSE file at https://angular.dev/license
77
*/
88

9-
import {ActiveDescendantKeyManager, Highlightable, ListKeyManagerOption} from '@angular/cdk/a11y';
9+
import {
10+
_IdGenerator,
11+
ActiveDescendantKeyManager,
12+
Highlightable,
13+
ListKeyManagerOption,
14+
} from '@angular/cdk/a11y';
1015
import {Directionality} from '@angular/cdk/bidi';
1116
import {coerceArray} from '@angular/cdk/coercion';
1217
import {SelectionModel} from '@angular/cdk/collections';
@@ -42,9 +47,6 @@ import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
4247
import {defer, fromEvent, merge, Observable, Subject} from 'rxjs';
4348
import {filter, map, startWith, switchMap, takeUntil} from 'rxjs/operators';
4449

45-
/** The next id to use for creating unique DOM IDs. */
46-
let nextId = 0;
47-
4850
/**
4951
* An implementation of SelectionModel that internally always represents the selection as a
5052
* multi-selection. This is necessary so that we can recover the full selection if the user
@@ -104,7 +106,7 @@ export class CdkOption<T = unknown> implements ListKeyManagerOption, Highlightab
104106
this._id = value;
105107
}
106108
private _id: string;
107-
private _generatedId = `cdk-option-${nextId++}`;
109+
private _generatedId = inject(_IdGenerator).getId('cdk-option-');
108110

109111
/** The value of this option. */
110112
@Input('cdkOption') value: T;
@@ -262,7 +264,7 @@ export class CdkListbox<T = unknown> implements AfterContentInit, OnDestroy, Con
262264
this._id = value;
263265
}
264266
private _id: string;
265-
private _generatedId = `cdk-listbox-${nextId++}`;
267+
private _generatedId = inject(_IdGenerator).getId('cdk-listbox-');
266268

267269
/** The tabindex to use when the listbox is enabled. */
268270
@Input('tabindex')

0 commit comments

Comments
 (0)