#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 8 years ago by
Keywords: | regression added |
---|---|
Priority: | minor → blocker |
Status: | new → open |
comment:2 Changed 8 years ago by
comment:3 Changed 8 years ago by
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:
- visit https://www.stellenticket.de/en/my_account/start/
- in your js console (firebug) execute:
show_predefined_popup_ajax('logged_in_already');
- a popup should be fetched via ajax and display
You are already logged in.
. Click on it: console should printcould not find trackingInstances
--> error was triggered - 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 8 years ago by
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 8 years ago by
If you remove the web fonts from your site does the error still occur?
comment:6 Changed 8 years ago by
Resolution: | → fixed |
---|---|
Status: | open → closed |
Dialog: Track the instance as soon as the dialog is opened
Fixes #10152
Changeset: 69f25dbff71d9864ce7ce46c47003413f8b7deb2
comment:7 Changed 8 years ago by
Milestone: | none → 1.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.
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.