Dialog: Clicking on modal dialog trigger firefox js error `this._trackingInstances(...)[0] is undefined`

[coolphoenix]

Please see this fiddle for a test case: ​http://jsfiddle.net/XRtf8/

When clicking inside the dialog in firefox, the following error is raised:

TypeError: this._trackingInstances(...)[0] is undefined:
this._trackingInstances()[ 0 ]._focusTabbable();

The dialog is only initialized with this:

$( "#dialog" ).dialog( {
    modal: true
});

Error happens on firefox 30 and 32a2, too. Chrome and safari do not show the error.

Jquery-ui: 1.11.0

Jquery: 1.11.0

Error does not happen on jquery-ui 1.10.4.

[tj.vantoll]

Ok this is confusing me. The error does not occur outside of the jsFiddle UI: ​http://jsfiddle.net/XRtf8/show/. I also tried including ​http://jsfiddle.net/XRtf8/show/ in an <iframe>, and that doesn't recreate the error either.

coolpheonix, did you run across this error in an app before seeing it in jsFiddle? If so were you using an iframe? Any information you can provide would be helpful.

Thanks.

[coolphoenix]

I ran across this on my web page where I am not using an iframe. I have some modal dialogs where this error does not happen but on at least one other it is. Unfortunately I am using a lot of different js libraries, so this is definitely not easy to debug and maybe is a coincidence with a same library jsfiddle uses, too. Additionally the js is minified on my site and I am getting the popup via ajax.

I patched jquery-ui on my site so the error does not trigger but only log to the console like this:

  10553                     if ( !this._allowInteraction( event ) ) {
  10554                         event.preventDefault();
  10555                         if( ti = this._trackingInstances()[ 0 ] ) {
  10556                             ti._focusTabbable();
  10557                         } else {
  10558                             if( console ) {
  10559                                 console.log('could not find trackingInstances');
  10560                             }
  10561                         }
  10562                     }

To reproduce the error on my site:

1. visit ​https://www.stellenticket.de/en/my_account/start/
2. in your js console (firebug) execute: show_predefined_popup_ajax('logged_in_already');
3. a popup should be fetched via ajax and display You are already logged in.. Click on it: console should print could not find trackingInstances --> error was triggered
4. you can find the uncompressed source of jquery-ui at ​https://www.stellenticket.de/js/0/components/jquery-ui/jquery-ui.js (but I only changed the above to workaround the error, nothing more)

[tj.vantoll]

Thanks coolphoenix, that helps.

I've tracked this down to this focusin listener: ​https://github.com/jquery/jquery-ui/blob/master/ui/dialog.js#L579-582. It fires in Chrome but does not fire in Firefox under these conditions. I'm not sure why yet.

[Scott González]

If you remove the web fonts from your site does the error still occur?

[Scott González]

Dialog: Track the instance as soon as the dialog is opened

Fixes #10152

Changeset: 69f25dbff71d9864ce7ce46c47003413f8b7deb2

[Scott González]

The web fonts were just a distraction from trying to reduce jsFiddle. I was only able to reproduce this by stripping down jsFiddle and using an iframe with a different origin. Removing CodeMirror or the jsFiddle Layout code made the error go away. When I got to that point, I decided not to spend any more time trying to narrow it down and just started debugging the actual dialog code.

Apparently what happens is Firefox tries to focus the dialog when it opens, but because it's in an iframe, it first focuses the document. Since the dialog instances aren't tracked until the dialog is focused, this caused the code to error when it saw a focus event outside of the dialog and tried to focus the most recently tracked instance. I fixed this by tracking the dialog instance as soon as it's opened. Although we don't have a reduced test case for the live site which doesn't use iframes, this should still fix the problem there.