Opened 8 years ago

Closed 8 years ago

Last modified 8 years ago

#9186 closed bug (notabug)

modal Dialog appended to ui-tabs-panel: Error: Cannot call method '_focusTabbable'

Reported by: tcovo Owned by:
Priority: minor Milestone: none
Component: ui.dialog Version: 1.10.2
Keywords: Cc:
Blocked by: Blocking:


I am using the Dialog widget's new "appendTo" option to associate a modal dialog with a particular tab panel, so that when the tab is deactivated, the dialog is hidden. However, when I re-activate the tab containing the dialog, I get the following error:

Uncaught TypeError: Cannot call method '_focusTabbable' of undefined

(that is the text in Chrome; Firefox produces a less descriptive message)

You may wonder how I am switching tabs if the dialog is modal: I manipulate the ui-widget-overlay so that it does not obstruct the tab handles. For this reason, I worry that maybe this is too far outside the expected use case to be considered a bug.

Here is a minimal jsfiddle reproducing the error:

For a simpler example which uses show() and hide() instead of tabs, but fails to reproduce the error, see

This issue seems related to, but that issue was closed as 'fixed'.

I tried to narrow down the problem, and I think it's related to this selector on line 5766 of jquery-ui-1.10.2.custom.js:

$(".ui-dialog:visible:last .ui-dialog-content")

It seems this is getting evaluated before the dialog is visible.

Change History (3)

comment:1 Changed 8 years ago by Scott González

Resolution: notabug
Status: newclosed

We don't support partial modals. This is broken because you're changing the positioning of the overlay from fixed to absolute, which isn't supported.

comment:2 Changed 8 years ago by tcovo

OK, fair enough.

Any idea how to do this properly? Should I roll my own overlay mechanism?


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

Yes, you'll need to roll your own.

Note: See TracTickets for help on using tickets.