使用 Angular 自定义组件 (ControlValueAccessor) 在 Safari 中出现奇怪的焦点行为

Question

我使用 ControlValueAccessor 制作了一个自定义 Angular (8.x) 组件。 使用两个或多个组件时，我在 Safari（桌面和移动）中出现奇怪的行为。 当我单击第二个输入元素时，焦点跳回到第一个。 我究竟做错了什么？

请参阅https://stackblitz.com/edit/angular-qcgefd 。

在 Chrome 和 Firefox（桌面和移动）中一切正常

Answer 1

在文件 fieldform.component.html 中，您定义了一个 ID 和名称，其值为“用户名”。 如果您随后在一个表单中多次使用该组件。 每个字段都具有相同的名称和 ID。 显然 Safari 不喜欢这样。 要解决这个问题，您必须从 fieldform.component 中删除名称和 ID。

fieldform.component.html 的新代码。

<div class="RPnbM">
  <label class="dozyoM">
    <input [type]="type" class="fhJDUk" (focusin)="onFocusIn()" (focusout)="onFocusOut()" [(ngModel)]="value"/>
    <span class="gUpyls" [class.kPeLXy]="hasValue() && !hasFocus" [class.hisroG]="hasFocus" >{{label}}</span>
  </label>
</div>