angular / angular/angular

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

オープン
#50,230 コメント 5 件 リアクション 0 件 担当者 0 名 GitHub で見る
area: core iOS state: needs more investigation
主要言語
TypeScript
スター
101k
フォーク
27.5k
平均マージ
1日 19時間
マージ済み PR(30日)
288

説明

### 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_

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

リンクされた最小再現コードから iOS Safari で問題を再現し、touchstart リスナー、*ngIf によって作成されるインタラクティブビュー、およびその外側にあるボタンに焦点を当ててください。次に、関係する Angular core のイベント処理と動的ビューのエントリポイントを追跡してください。インタラクティブな動的ビューが存在したまま、外側のボタンが最初のクリックで発火すれば完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
angular, typescript
領域
frontend
issue の種類
バグ
難易度
4/5
見積もり時間
3〜5日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
38/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。