Skip to main content

Search and Top Navigation

#10152 closed bug (fixed)

Opened July 10, 2014 12:15PM UTC

Closed July 23, 2014 03:10PM UTC

Last modified July 23, 2014 03:16PM UTC

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

Reported by: coolphoenix Owned by:
Priority: blocker Milestone: 1.11.1
Component: ui.dialog Version: 1.11.0
Keywords: regression Cc:
Blocked by: Blocking:
Description

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.

Attachments (0)
Change History (7)

Changed July 10, 2014 12:58PM UTC by tj.vantoll comment:1

keywords: → regression
priority: minorblocker
status: newopen

Changed July 10, 2014 01:23PM UTC by tj.vantoll comment:2

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.

Changed July 10, 2014 01:56PM UTC by coolphoenix comment:3

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/

1. in your js console (firebug) execute: ``show_predefined_popup_ajax('logged_in_already');``

1. 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

1. 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)

Changed July 10, 2014 08:07PM UTC by tj.vantoll comment:4

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.

Changed July 21, 2014 05:30PM UTC by scottgonzalez comment:5

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

Changed July 23, 2014 03:10PM UTC by Scott González comment:6

resolution: → fixed
status: openclosed

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

Fixes #10152

Changeset: 69f25dbff71d9864ce7ce46c47003413f8b7deb2

Changed July 23, 2014 03:16PM UTC by scottgonzalez comment:7

milestone: none1.11.1

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.