Global Escape Key Listener Already Exists Error When Opening Multiple Dialogs

[ahmet-cetinkaya]

Describe the bug

When attempting to open multiple instances of the dialog component simultaneously, the application encounters the following error: global esc key listener with priority [300, undefined] already exists. This error disrupts the expected functionality of the dialog component and prevents the proper handling of multiple instances.

Reproducer

https://stackblitz.com/edit/173pfv?file=src%2FApp.jsx

PrimeReact version

10.3.1

React version

18.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

Firefox Develeper Edition 122.0b9, Brave 1.61.116 Chromium: 120.0.6099.217

Steps to reproduce the behavior

1. Add dialog components then more one
2. Add a button to open multiple dialog
3. Click open button
4. See error on console

Expected behavior

I expected the application to handle multiple dialog instances gracefully without encountering any errors. At least when the closeOnEscape property is false, it shouldn't be a problem.

[melloware]

Thanks for the reproducer I will investigate.

[melloware]

@ahmet-cetinkaya 10.3.2 is out if you would like to try and report back.

[enzolry]

For me, the error started appearing randomly after upgrading from 10.0.X to 10.5.1.

[melloware]

@enzolry we have a fix upcoming for 10.5.2: https://github.com/primefaces/primereact/issues/6000

[bloodykheeng]

@melloware issue is still there prime react 10.6.6 . i was using the image component with a preview on a map marker (leaflet js) but i noted when i click on a map marker it opens a popup where i display the primereact image component and the primereact image component has preview enabled .

preview works when my map is not in full screeen but when i put it in full screen i get error. So the problem happens when i try to preview image when ive opened the map in full screen

am using this to show map in full screen import "leaflet-fullscreen"; import "leaflet-fullscreen/dist/Leaflet.fullscreen.js"; import "leaflet-fullscreen/dist/leaflet.fullscreen.css";

what i noted the maps z index is greater than the image preview z index so the image shows behind the map when am in the maps view full screen and when i try to preview the image in full screen and so the image previews but it comes behind the map

so when i try to open another image when the first image is still open behind the map i get this error

Unexpected: global esc key listener with priority [400, 0] already exists. at Object.addListener (http://localhost:3000/static/js/bundle.js:342549:13) at http://localhost:3000/static/js/bundle.js:342570:38 at commitHookEffectListMount (http://localhost:3000/static/js/bundle.js:408788:30) at commitPassiveMountOnFiber

i need some help here how can i set the image preview zIndex such that i make it greater than the map am using leaflet for my maps

[melloware]

@bloodykheeng might need a fix similar to this one: https://github.com/primefaces/primereact/pull/7228

[bloodykheeng]

@melloware isuue still exits on Image component with preview

[melloware]

See my comment above i think its needs a bug fix similar to #7228

[bloodykheeng]

@melloware im still facing challenge here ok i replaced image in now am using a diaglog to preview it but still the diaglog comes behind the map even if i set th diaglog zIndex to 300000000 millions still its behind the map i dono why

This behaviour happens when i view the map in full screen

import "leaflet-fullscreen"; import "leaflet-fullscreen/dist/Leaflet.fullscreen.js"; import "leaflet-fullscreen/dist/leaflet.fullscreen.css";

[melloware]

Honestly its most likely Leaflet related and you will have to study it. It may not even be a z-Index issue it may be something special Leaflet is doing...

Especially import "leaflet-fullscreen/dist/leaflet.fullscreen.css"; since FullScreen MEANS fullscreen.

[bloodykheeng]

@melloware the link ur giving me its showing fixes made on calender component am taking about Image component import { Image } from 'primereact/image';

https://primereact.org/image/

[melloware]

@bloodykheeng yes I am saying that bug has the same "duplicate" error you are reporting. It looks like it was fixed for Calendar I am saying it sounds like a SIMILAR fix will be need to be made for this issue. "global esc key listener with priority [400, 0] already exists." is the same error that Calendar was getting.

[bloodykheeng]

ok cool i get it then @melloware

But incase u have any idea or solution on how i can be able to show the diaglog infront of the react leaflet map in full screen
please u can notify me

[melloware]

Nope as i mentioned you can see its a Leaflet issue: https://github.com/Leaflet/Leaflet.fullscreen/issues/113

Forget React its just a problem with how they do their fullscreen mode.

[bloodykheeng]

ok then @melloware lemi try to look into leaflet full screen css

[eliashetland]

i get the error

global esc key listener with priority [600, 0] already exists.

when using two calendars with showtime, timeonly. To replicate open one of the calendars, change time, and then click on the other calendar

[melloware]

@eliashetland already fixed for next release: https://github.com/primefaces/primereact/issues/7220