fix(material/button-toggle): changed after checked error when updating tabindex (angular#31172)

Reworks the button toggle so it doesn't cause a "changed after checked" error when its tabindex is updated.

Author: crisbeto

src/material/button-toggle/button-toggle.spec.ts

@@ -1,12 +1,5 @@
 import {dispatchMouseEvent} from '@angular/cdk/testing/private';
-import {
-  Component,
-  DebugElement,
-  provideCheckNoChangesConfig,
-  QueryList,
-  ViewChild,
-  ViewChildren,
-} from '@angular/core';
+import {Component, DebugElement, QueryList, ViewChild, ViewChildren} from '@angular/core';
 import {ComponentFixture, TestBed, fakeAsync, flush, tick} from '@angular/core/testing';
 import {FormControl, FormsModule, NgModel, ReactiveFormsModule} from '@angular/forms';
 import {By} from '@angular/platform-browser';
@@ -19,21 +12,6 @@ import {
 } from './index';
 
 describe('MatButtonToggle with forms', () => {
-  beforeEach(fakeAsync(() => {
-    TestBed.configureTestingModule({
-      providers: [provideCheckNoChangesConfig({exhaustive: false})],
-      imports: [
-        MatButtonToggleModule,
-        FormsModule,
-        ReactiveFormsModule,
-        ButtonToggleGroupWithNgModel,
-        ButtonToggleGroupWithFormControl,
-        ButtonToggleGroupWithIndirectDescendantToggles,
-        ButtonToggleGroupWithFormControlAndDynamicButtons,
-      ],
-    });
-  }));
-
   describe('using FormControl', () => {
     let fixture: ComponentFixture<ButtonToggleGroupWithFormControl>;
     let groupDebugElement: DebugElement;
@@ -333,27 +311,6 @@ describe('MatButtonToggle with forms', () => {
 });
 
 describe('MatButtonToggle without forms', () => {
-  beforeEach(fakeAsync(() => {
-    TestBed.configureTestingModule({
-      providers: [provideCheckNoChangesConfig({exhaustive: false})],
-      imports: [
-        MatButtonToggleModule,
-        ButtonTogglesInsideButtonToggleGroup,
-        ButtonTogglesInsideButtonToggleGroupMultiple,
-        FalsyButtonTogglesInsideButtonToggleGroupMultiple,
-        ButtonToggleGroupWithInitialValue,
-        StandaloneButtonToggle,
-        ButtonToggleWithAriaLabel,
-        ButtonToggleWithAriaLabelledby,
-        RepeatedButtonTogglesWithPreselectedValue,
-        ButtonToggleWithTabindex,
-        ButtonToggleWithStaticName,
-        ButtonToggleWithStaticChecked,
-        ButtonToggleWithStaticAriaAttributes,
-      ],
-    });
-  }));
-
   describe('inside of an exclusive selection group', () => {
     let fixture: ComponentFixture<ButtonTogglesInsideButtonToggleGroup>;
     let groupDebugElement: DebugElement;

src/material/button-toggle/button-toggle.ts

@@ -31,8 +31,10 @@ import {
   OnInit,
   Output,
   QueryList,
+  signal,
   ViewChild,
   ViewEncapsulation,
+  WritableSignal,
 } from '@angular/core';
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
 import {_animationsDisabled, _StructuralStylesLoader, MatPseudoCheckbox, MatRipple} from '../core';
@@ -450,7 +452,6 @@ export class MatButtonToggleGroup implements ControlValueAccessor, OnInit, After
         }
       }
     }
-    this._markButtonsForCheck();
   }
 
   /** Obtain the subsequent toggle to which the focus shifts. */
@@ -613,15 +614,12 @@ export class MatButtonToggle implements OnInit, AfterViewInit, OnDestroy {
   /** Tabindex of the toggle. */
   @Input()
   get tabIndex(): number | null {
-    return this._tabIndex;
+    return this._tabIndex();
   }
   set tabIndex(value: number | null) {
-    if (value !== this._tabIndex) {
-      this._tabIndex = value;
-      this._markForCheck();
-    }
+    this._tabIndex.set(value);
   }
-  private _tabIndex: number | null;
+  private _tabIndex: WritableSignal<number | null>;
 
   /** Whether ripples are disabled on the button toggle. */
   @Input({transform: booleanAttribute}) disableRipple: boolean;
@@ -691,7 +689,7 @@ export class MatButtonToggle implements OnInit, AfterViewInit, OnDestroy {
       {optional: true},
     );
 
-    this._tabIndex = parseInt(defaultTabIndex) || 0;
+    this._tabIndex = signal<number | null>(parseInt(defaultTabIndex) || 0);
     this.buttonToggleGroup = toggleGroup;
     this.appearance =
       defaultOptions && defaultOptions.appearance ? defaultOptions.appearance : 'standard';