igniteui-webcomponents icon indicating copy to clipboard operation
igniteui-webcomponents copied to clipboard
verified publisher icon IgniteUI

Dialog escape key handling leaves overlay active

Open IMinchev64 opened this issue 2 years ago • 3 comments

Description

When the dialog is opened, if the user does not click anywhere else on the screen and press the Escape key the dialog is closed but the gray overlay remains.

Steps to reproduce

  1. Navigate to one of the dialog samples such as this one.
  2. Open the dialog by clicking the "Show Dialog" button.
  3. Without clicking anywhere else or interacting with the dialog, press the Escape key.

Result

The dialog itself closes, but a gray overlay remains on the screen, indicating the dialog close action is not fully completed.

Expected result

The dialog closes and the overlay is removed, returning to the normal view.

Attachments

None

IMinchev64 avatar Jan 17 '24 16:01 IMinchev64

Can you provide a short clip or some other information, such as a console error if available? I can't reproduce the issue on my end.

rkaraivanov avatar Jan 18 '24 06:01 rkaraivanov

@rkaraivanov surely, here you go:

https://github.com/IgniteUI/igniteui-webcomponents/assets/61944284/567017b6-f0c5-4f95-82fd-6f85ed045b7d

IMinchev64 avatar Jan 18 '24 09:01 IMinchev64

Alright, it seems this issue runs deeper than I initially thought.

I still can't reproduce it on my end with these browser builds: Edge Version 122.0.2325.0 (Official build) dev (64-bit) Chrome Version 120.0.6099.225 (Official Build) (64-bit) Firefox 123.0a1 (2024-01-17) (64-bit)

After digging through the Chromium bug tracker, I came to this: https://bugs.chromium.org/p/chromium/issues/detail?id=1512224&q=component%3ABlink%3EHTML%3EDialog&can=1

I guess this was "regressed" in Chrome for some time during the end of last year but seems to be reverted at least in the version I tested with. I guess the version of Edge you use in your showcase is one that has the new behavior.

I'll mark it as a 3rd party issue, since there is no straightforward fix. Firefox and Safari have not yet implemented the proposed API. Attaching a close handler is doable but then there will be behavioral changes in the component in the case when a user opens it and then immediately presses Esc (events not firing correctly, keepOpenOnEscape not working).

I'll set this in review and discuss with the rest of the team possible solutions.

rkaraivanov avatar Jan 18 '24 12:01 rkaraivanov