iOS - Button Click is ignored when there is a dynamic view created based on a touch or mouse Event

[jbchr]

Which @angular/* package(s) are the source of the bug?

core

Is this a regression?

No

Description

This bug is only happening in iOS:

If a view is created through *ngIf or ViewContainerRef.createEmbeddedView based on an event listener to touchstart or other mouse events and there is a button outside of the dynamic view then this button need to be clicked twice in order for the click event to be fired.

A minimal reproduction example is this:

import { CommonModule } from '@angular/common';
import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  template: `
    <h1>Angular iOS Click Bug Demo</h1>
    <p> In all browsers clicking the 'Hello' button will trigger an alert immediately.</p>
    <p> But in iOS Safari two clicks are needed. However this only happens if the dynamic view inside the ngIf contains an interactive element.<p>
    <p> If you remove the click listener manually it will work.</p>
    <button (click)="alert('test')">Hello</button>
    <div *ngIf="active"><span (click)="alert('you clicked the span')">Some interactive element</span></div>
  `
})
export class AppComponent {
  active = false;
  alert = alert;

  constructor() {
      window.addEventListener('touchstart', () => this.setActive());
  }

  setActive() {
    if (!this.active) {
      this.active = true;
    }
  }
}


bootstrapApplication(AppComponent)

In this example the Hello button needs to be clicked twice in iOS. If you remove the (click) event from the span inside the dynamic view then the Hello button needs to be clicked only once

Please provide a link to a minimal reproduction of the bug

https://github.com/jbchr/angular-ios-click-bug

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 16.0.0
Node: 16.20.0
Package Manager: npm 8.19.4
OS: darwin arm64

Angular: 16.0.0
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1600.0
@angular-devkit/build-angular   16.0.0
@angular-devkit/core            16.0.0
@angular-devkit/schematics      16.0.0
@schematics/angular             16.0.0
rxjs                            7.8.1
typescript                      5.0.4

But this is happening also at least from Angular V12

Anything else?

No response

[pkozlowski-opensource]

Repro scenario in stackblitz: https://stackblitz.com/edit/angular-n3ttvb?file=src%2Fmain.ts,src%2Findex.html

[pkozlowski-opensource]

@jbchr does it need RxJS in the mix to reproduce? I'm trying to narrow it down to the bare minimum, the equivalent without RxJS would be: https://stackblitz.com/edit/angular-n3ttvb?file=src%2Fmain.ts,src%2Findex.html

Also, does it need to have both touchstart and mousedown to reproduce?

Again, I suspect some subtle timing issue and want to make sure that we've got absolutely minimal reproduce scenario so we can understand what is going on.

[jbchr]

@pkozlowski-opensource thanks for getting back to me so quickly.

RxJS is not needed, also mousedown is not needed, I only added it to have the same behaviour (rendering the dynamic view) in the desktop browser.

Removed both from the code above and in the github repo

[jbchr]

@pkozlowski-opensource is this info sufficient?

[jbchr]

@pkozlowski-opensource are there any more infos needed from my side?