docs(material/form-field): disable bubbling on prefix in example (#29069

)

* form field button click event bubbling fix

* mousevent change

src/components-examples/material/form-field/form-field-prefix-suffix/form-field-prefix-suffix-example.html

@@ -2,7 +2,7 @@
   <mat-form-field>
     <mat-label>Enter your password</mat-label>
     <input matInput [type]="hide ? 'password' : 'text'">
-    <button mat-icon-button matSuffix (click)="hide = !hide" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide">
+    <button mat-icon-button matSuffix (click)="clickEvent($event)" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide">
       <mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
     </button>
   </mat-form-field>

src/components-examples/material/form-field/form-field-prefix-suffix/form-field-prefix-suffix-example.ts

@@ -14,4 +14,8 @@ import {MatFormFieldModule} from '@angular/material/form-field';
 })
 export class FormFieldPrefixSuffixExample {
   hide = true;
+  clickEvent(event: MouseEvent) {
+    this.hide = !this.hide;
+    event.stopPropagation();
+  }
 }