Search code examples
angularsafaricontrolvalueaccessor

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

I made a custom Angular (8.x) component using a ControlValueAccessor. I have strange behaviour in Safari (desktop and mobile) when using two or more components. When I click the second input element, the focus jumps back to the first one. What am I doing wrong?

See https://stackblitz.com/edit/angular-qcgefd.

Everything works fine in Chrome & Firefox (desktop and mobile)

Solution

  • In the file fieldform.component.html you define a id and name with values 'username'. If you then use this component multiple times in a form. Each of the fields have the same name and id. Apparently Safari does not like this. To solve this you have to remove the name and id from the fieldform.component.

    New code for 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>