为什么自动建议菜单将所选项目添加到多个输入中？

如何解决为什么自动建议菜单将所选项目添加到多个输入中？

我正在使用 Angular Materials 处理 Angular 应用程序。我有一个奇怪的情况，有两个输入字段垂直对齐，当我单击一个并从弹出的自动建议菜单中选择一个选项时，它想将所选项目添加到两个输入中：

我发现我可以通过在它们之间添加一个 mat-slide-toggle 来解决这个问题：

但我不应该这样做（而且我不想这样做）。

如果我将 mat-slide-toggle css 设置为 display: none 或 visibility: hidden，此修复将停止工作。它也不一定只适用于输入之间的任何元素。例如，我添加了 <div style="border: 1px solid red; width: 100%; height: 20px"></div> 但这不起作用。

我也不确定这是 Angular Materials 问题，因为我记得之前在 Vue.js 应用程序中看到过这个问题。

代码如下：

<mat-form-field>
        <mat-label>Interruption Emails</mat-label>
        <mat-chip-list #interruptionEmailChips fxLayout="row">
          <div>
            <mat-chip class="emails"
              *ngFor="let interruptionEmail of interruptionEmailList"
              [selectable]="true"
              [removable]="true"
              (removed)="removeEmail(interruptionEmailList,interruptionEmail)">
                {{ interruptionEmail }}
              <mat-icon matChipRemove>cancel</mat-icon>
            </mat-chip>
            <input
              id="interruption-email-input"
              name="interruption-email-input"
              placeholder="Add email to list..."
              [matChipInputFor]="interruptionEmailChips"
              [matChipInputAddOnBlur]="true"
              [matChipInputSeparatorKeyCodes]="separatorKeyCodes"
              (matChipInputTokenEnd)="addEmail(interruptionEmailList,'interruptionEmails',$event)"
            />
            <mat-error>
              <span *ngIf="formErrors.interruptionEmails"> {{ formErrors.interruptionEmails }} </span>
            </mat-error>
          </div>
        </mat-chip-list>
      </mat-form-field>

      <!-- <mat-slide-toggle color="primary" name="tempEmailsEnabled"></mat-slide-toggle> -->

      <mat-form-field>
        <mat-label>Archive Readings File - Emails</mat-label>
        <mat-chip-list #archiveReadingsFileEmailChips fxLayout="row">
          <div>
            <mat-chip class="emails"
              *ngFor="let archiveReadingsFileEmail of archiveReadingsFileEmailList"
              [selectable]="true"
              [removable]="true"
              (removed)="removeEmail(archiveReadingsFileEmailList,archiveReadingsFileEmail)">
                {{ archiveReadingsFileEmail }}
              <mat-icon matChipRemove>cancel</mat-icon>
            </mat-chip>
            <input
              id="archive-readings-file-email-input"
              name="archive-readings-file-email-input"
              placeholder="Add email to list..."
              [matChipInputFor]="archiveReadingsFileEmailChips"
              [matChipInputAddOnBlur]="true"
              [matChipInputSeparatorKeyCodes]="separatorKeyCodes"
              (matChipInputTokenEnd)="addEmail(archiveReadingsFileEmailList,'archiveReadingsFileEmails',$event)"
            />
            <mat-error>
              <span *ngIf="formErrors.archiveReadingsFileEmails"> {{ formErrors.archiveReadingsFileEmails }} </span>
            </mat-error>
          </div>
        </mat-chip-list>
      </mat-form-field>

有人知道为什么会发生这种情况以及我能做些什么吗？