Opened 11 years ago

Closed 11 years ago

#8551 closed bug (fixed)

After repeated opening and closing of a modal dialog, focus navigation using tab becomes slow.

Reported by: ctrlaltdev Owned by:
Priority: minor Milestone: 1.9.0
Component: ui.dialog Version: 1.8.22
Keywords: Cc:
Blocked by: Blocking:

Description

Reproducible in Firefox 14.0.1/Windows7 and Firefox 14.0.1/MacOS 10.7.4 Still exists in 1.8.23

When using a modal dialog bound to the HTML on page load and repeatedly opening and closing the dialog, tabbing through the text inputs in that dialog becomes slower and slower.

Steps to reproduce:

  • Paste the snippets below in jsbin.
  • Click the 'open' link in the output and tab through the textfields. Its fast.
  • Now press escape, and open, and repeat about 20 times.
  • Tab through the text fields again. Its a lot slower.
  • The more you open and close the dialog the slower it becomes.

I've noticed in the source code that dialog.open binds to keydown if modal (line 321) but doesn't reverse the process in dialog.close. Adding an unbind to the close method solves the problem.

Sample code: 

$(document).ready(function() {
  var dlg = $("#dialog");
  dlg.dialog({
    modal:true,
    autoOpen: false,
    buttons: {
      Ok: function() {
        dlg.dialog("close");
      },
      Cancel: function() {
        dlg.dialog("close");
      }
    }
  });
  $("#open").on('click',function(e) {
    e.preventDefault();
    dlg.dialog("open");
  });
});

and 

<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id="dialog">
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
  </div>
  <a id="open" href="#">open</a>
  
</body>
</html>

Change History (1)

comment:1 Changed 11 years ago by Scott González

Resolution: → fixed
Status: new → closed

Dialog: Only bind focus-trapping event once. Fixes #8551 - After repeated opening and closing of a modal dialog, focus navigation using tab becomes slow.

Changeset: 6abb10766c985bd2f3b0d580058c3e6ade18edaf

Note: See TracTickets for help on using tickets.