ionic-team / ionic-team/ionic-framework

bug: Ionic overlays' focus return causes unexpected behavior

未关闭
#22,795 10 条评论 1 个 reaction 已指派 0 人 在 GitHub 查看
package: core type: bug
主要语言
TypeScript
星标
52.7k
派生
13.3k
平均合并
1 天 15 小时
30 天内合并 PR
51

描述

# Bug Report

**Ionic version:**
[ ] **4.x**
[x] **5.3.4+**

**Current behavior:**
Our app has `IonActionSheet` with actions taking user to another page. During page navigation that action sheet appears for a moment in a broken state (let's say 'flashing').

**Expected behavior:**
No `IonActionSheet` 'flashing'

**Steps to reproduce:**
I don't think that you need to reproduce exactly my case here. Still I was able to find a root cause and it's connected with a fix you introduced in 5.3.4 version (https://github.com/ionic-team/ionic-framework/pull/22167). The page, user navigates to, displays `IonLoading` at the startup, which is dismissed (`onDidDismiss` of loading overlay is resolved) before the same thing from `IonActionSheet` overlay. So, at the moment `IonLoading` was _**presented**_, an `IonActionSheetButton` was an active element, therefore loading overlay returns focus to that button on dismiss and this results in displaying of `IonActionSheet` in some weird state.

**Other information:**
I wouldn't say it's a bug, but it's definitely an issue. Moreover, it might be more global than it seems.
Specifically in my case it's an issue with a pair of Ionic framework components. In the same time, if we take a look at such overlay behavior wider, you're playing with focus without any awareness of app layout and elements structure. Furthermore, you do this after some timeout (of dismiss animation), while other element may already have taken focus (intentionally) and you'll steal it again with no need at all. And speaking of code, I believe it is too much of responsibility for a common overlay component to give focus to whatever element it finds suitable (outside of overlay and modals/popovers/etc. wrapper components).
Well, it'd be nice to have at least a boolean flag to be able to disable such overlays behavior. In my view, it should be disabled by default, cause:

- It may not be needed at all (like in my case, i.e., user leaves a page - what's the point to give a focus back to invisible or deleted element?);
- It may be needed to give a focus to another element after overlay is dismissed (i.e., to set focus to the next form input after user filled the previous one);
- It causes issues with Ionic components itself;

That said, I'll be happy with any solution you come up to, which will provide control over overlays' focus return.

**Ionic info:**

```
Ionic:

Ionic CLI : 6.12.3
Ionic Framework : @ionic/angular 5.3.4
@angular-devkit/build-angular : 0.1100.7
@angular-devkit/schematics : 11.0.7
@angular/cli : 11.0.7
@ionic/angular-toolkit : 3.0.0

Cordova:

Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : none
Cordova Plugins : no whitelisted plugins (0 plugins total)

Utility:

cordova-res : not installed
native-run : not installed

System:

NodeJS : v12.18.1 (C:\Program Files\nodejs\node.exe)
npm : 6.14.5
OS : Windows 10
```

贡献指南

打开贡献指南

评估

这个 Issue 还没有评估数据。

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。