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

Question

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

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

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

Answer 1

在文件 fieldform.component.html 中，您定义了一个 ID 和名称，值为 'username'。如果您随后在一个表单中多次使用该组件。每个字段都具有相同的名称和 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>

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

Strange focus behavoir in Safari with Angular custom component (ControlValueAccessor)

safari

angular

controlvalueaccessor