refactor(material/select): use ID generator

Switches to using the ID generator service to create unique IDs. (cherry picked from commit 7f22090)
angular · Nov 4, 2024 · 2aa6e98 · 2aa6e98
1 parent 166b62f
commit 2aa6e98
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/src/material/select/select.spec.ts b/src/material/select/select.spec.ts
@@ -220,7 +220,7 @@ describe('MatSelect', () => {
           fixture.detectChanges();
           const hint = fixture.debugElement.query(By.css('mat-hint')).nativeElement;
           expect(select.getAttribute('aria-describedby')).toBe(hint.getAttribute('id'));
-          expect(select.getAttribute('aria-describedby')).toMatch(/^mat-mdc-hint-\d+$/);
+          expect(select.getAttribute('aria-describedby')).toMatch(/^mat-mdc-hint-\w+\d+$/);
         });
 
         it('should support user binding to `aria-describedby`', () => {

diff --git a/src/material/select/select.ts b/src/material/select/select.ts
@@ -7,6 +7,7 @@
  */
 
 import {
+  _IdGenerator,
   ActiveDescendantKeyManager,
   addAriaReferencedId,
   LiveAnnouncer,
@@ -96,8 +97,6 @@ import {
 } from './select-errors';
 import {NgClass} from '@angular/common';
 
-let nextUniqueId = 0;
-
 /** Injection token that determines the scroll handling while a select is open. */
 export const MAT_SELECT_SCROLL_STRATEGY = new InjectionToken<() => ScrollStrategy>(
   'mat-select-scroll-strategy',
@@ -215,6 +214,7 @@ export class MatSelect
   protected _changeDetectorRef = inject(ChangeDetectorRef);
   readonly _elementRef = inject(ElementRef);
   private _dir = inject(Directionality, {optional: true});
+  private _idGenerator = inject(_IdGenerator);
   protected _parentFormField = inject<MatFormField>(MAT_FORM_FIELD, {optional: true});
   ngControl = inject(NgControl, {self: true, optional: true})!;
   private _liveAnnouncer = inject(LiveAnnouncer);
@@ -312,7 +312,7 @@ export class MatSelect
   private _compareWith = (o1: any, o2: any) => o1 === o2;
 
   /** Unique id for this input. */
-  private _uid = `mat-select-${nextUniqueId++}`;
+  private _uid = this._idGenerator.getId('mat-select-');
 
   /** Current `aria-labelledby` value for the select trigger. */
   private _triggerAriaLabelledBy: string | null = null;
@@ -367,7 +367,7 @@ export class MatSelect
   _onTouched = () => {};
 
   /** ID for the DOM node containing the select's value. */
-  _valueId = `mat-select-value-${nextUniqueId++}`;
+  _valueId = this._idGenerator.getId('mat-select-value-');
 
   /** Emits when the panel element is finished transforming in. */
   readonly _panelDoneAnimatingStream = new Subject<string>();