#8551 closed bug (fixed)

Opened September 04, 2012 10:35AM UTC

Closed September 04, 2012 09:00PM UTC

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>
Attachments (0)
Change History (1)

Changed September 04, 2012 09:00PM UTC by Scott González comment:1

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