Opened 3 years ago

Closed 3 years ago

Last modified 3 years ago

#10152 closed bug (fixed)

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.

Change History (7)

comment:1 Changed 3 years ago by tj.vantoll

Keywords: regression added
Priority: minorblocker
Status: newopen

comment:2 Changed 3 years ago by 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.

comment:3 Changed 3 years ago by 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)

comment:4 Changed 3 years ago by 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.

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

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

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

Resolution: fixed
Status: openclosed

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

Fixes #10152

Changeset: 69f25dbff71d9864ce7ce46c47003413f8b7deb2

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

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.

Note: See TracTickets for help on using tickets.