Move better sync logic to formfield

Author: adolgachev

src/material/form-field/form-field.ts

@@ -309,7 +309,7 @@ export class MatFormField
   readonly _hintLabelId = this._idGenerator.getId('mat-mdc-hint-');
 
   // Ids obtained from the fields
-  private _describedByIds: Array<String> = [];
+  private _describedByIds: string[] | undefined;
 
   /** Gets the current form field control */
   get _control(): MatFormFieldControl<any> {
@@ -708,16 +708,21 @@ export class MatFormField
         ids.push(...this._errorChildren.map(error => error.id));
       }
 
-      let currentIds = this._control.describedByIds ?? [];
-      let combinedIds: Array<string> = [];
-      currentIds.forEach(id => {
-        if (!this._describedByIds.includes(id)) {
-          combinedIds.push(id);
-        }
-      });
-      combinedIds.concat(...ids);
+      const existingDescribedBy = this._control.describedByIds;
+      let toAssign: string[];
+
+      // In some cases there might be some `aria-describedby` IDs that were assigned directly,
+      // like by the `AriaDescriber` (see #30011). Attempt to preserve them by taking the previous
+      // attribute value and filtering out the IDs that came from the previous `setDescribedByIds`
+      // call. Note the `|| ids` here allows us to avoid duplicating IDs on the first render.
+      if (existingDescribedBy) {
+        const exclude = this._describedByIds || ids;
+        toAssign = ids.concat(existingDescribedBy.filter(id => id && !exclude.includes(id)));
+      } else {
+        toAssign = ids;
+      }
 
-      this._control.setDescribedByIds(combinedIds);
+      this._control.setDescribedByIds(toAssign);
       this._describedByIds = ids;
     }
   }

src/material/input/input.ts

@@ -114,9 +114,6 @@ export class MatInput
   private _cleanupIosKeyup: (() => void) | undefined;
   private _cleanupWebkitWheel: (() => void) | undefined;
 
-  /** `aria-describedby` IDs assigned by the form field. */
-  private _formFieldDescribedBy: string[] | undefined;
-
   /** Whether the component is being rendered on the server. */
   readonly _isServer: boolean;
 
@@ -563,30 +560,13 @@ export class MatInput
 
   /**
    * Implemented as part of MatFormFieldControl.
-   * @docs-private
+   * @docs-privatex`
    */
   setDescribedByIds(ids: string[]) {
     const element = this._elementRef.nativeElement;
-    const existingDescribedBy = element.getAttribute('aria-describedby');
-    let toAssign: string[];
-
-    // In some cases there might be some `aria-describedby` IDs that were assigned directly,
-    // like by the `AriaDescriber` (see #30011). Attempt to preserve them by taking the previous
-    // attribute value and filtering out the IDs that came from the previous `setDescribedByIds`
-    // call. Note the `|| ids` here allows us to avoid duplicating IDs on the first render.
-    if (existingDescribedBy) {
-      const exclude = this._formFieldDescribedBy || ids;
-      toAssign = ids.concat(
-        existingDescribedBy.split(' ').filter(id => id && !exclude.includes(id)),
-      );
-    } else {
-      toAssign = ids;
-    }
-
-    this._formFieldDescribedBy = ids;
 
-    if (toAssign.length) {
-      element.setAttribute('aria-describedby', toAssign.join(' '));
+    if (ids.length) {
+      element.setAttribute('aria-describedby', ids.join(' '));
     } else {
       element.removeAttribute('aria-describedby');
     }