Opened 10 years ago

Closed 8 years ago

Last modified 8 years ago

#5365 closed bug (duplicate)

ESC key problem

Reported by: fredericomf Owned by:
Priority: major Milestone: 1.9.0
Component: ui.dialog Version: 1.8rc3
Keywords: Cc:
Blocked by: Blocking:

Description

When i created two modal dialogs using UI the second dialog don't listen the ESC key event.

This is the structure of modal dialogs:

<div id="modal01">
  Some Text
  <a id="showSecondDialog">NEW</a>
  <div id="modal02">
    Some Text
  </div>
</div>

Both dialogs has option: autoOpen: false.

The trigger to show the second dialog is a button inside a first dialog.

Pressing ESC key the first dialog is closed and the second don't close.

Change History (4)

comment:1 Changed 9 years ago by watanabe

Step:

  1. Open a modal dialog having a button to open a child modal dialog.
  2. Open the child dialog.
  3. Click the overlay.
  4. Press ESC key.

See:
jQuery UI 1.8.1 Uncompressed version
jquery.ui.dialog.js

line 702 (overlay create)

dialog.close(event);

line 72 (dialog _create)

self.close(event);

line 683 (overlay create)

if (this.instances.length === 0) {

Problem:
in line 702, "dialog" means "the first dialog".

comment:2 Changed 9 years ago by bostanio

The problem here is that we only bind the 'keydown.dialog-overlay' event once and for the first overlay created (so for the first modal dialog). The fix is to still only bind the event once but have the event search the instances for the 'top' overlay (by zIndex) and close it's dialog. This also necessitates the overlay having a back reference to it's dialog but that is easy to do.

Note that there is a second bug lurking here that hitting escape with the focus in the second dialog would close both dialogs. First you close the top dialog and then the ESCAPE keydown event propagates to the overlay and closes the next dialog. Simple fix is to stop the event propagating.

Both fixes and visual test case are in these commits (second is useful comments):

  1. http://github.com/bostanio/jquery-ui/commit/5cae67431bde74301a72ce86d6ada11ebd9f5243
  2. http://github.com/bostanio/jquery-ui/commit/324d3ea808f3a85c50e06a0afedb748e7891d7cd

comment:3 Changed 8 years ago by Scott González

Resolution: duplicate
Status: newclosed

comment:4 Changed 8 years ago by Scott González

Duplicate of #6966.

Note: See TracTickets for help on using tickets.