angular / angular/angular

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

Open
#50,230 5 comments 0 reactions 0 assignees View on GitHub
area: core iOS state: needs more investigation
Dominant language
TypeScript
Stars
101k
Forks
27.5k
Avg merge
1d 19h
Merged PRs (30d)
288

Description

### 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: `

Angular iOS Click Bug Demo


In all browsers clicking the 'Hello' button will trigger an alert immediately.


But in iOS Safari two clicks are needed. However this only happens if the dynamic view inside the ngIf contains an interactive element.


If you remove the click listener manually it will work.


Hello
Some interactive element

`
})
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`)

```true
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_

Contributor guide

Open the contributing guide

Research direction

Reproduce the issue from the linked minimal reproduction in iOS Safari, focusing on the touchstart listener, the *ngIf-created interactive view, and the button outside it. Then trace the Angular core event handling and dynamic-view entry points involved; done means the outside button fires on its first click while the interactive dynamic view remains present.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.