angular - 使用 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>