ionic-team / ionic-team/ionic-framework

bug: Ionic overlays' focus return causes unexpected behavior

Đang mở
#22,795 10 bình luận 1 reaction 0 người được giao Xem trên GitHub
package: core type: bug
Ngôn ngữ chính
TypeScript
Star
52.7k
Fork
13.3k
Merge trung bình
1 ngày 15 giờ
Pull request đã merge (30 ngày)
51

Mô tả

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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.