Focus-trapping of button collection (popover) in conflict with jQuery-UI dialog

Inso2008

Hello, we're seeing a problem when using DataTables inside jQuery UI's dialog. I haven't found this exact issue being mentioned in the forum.

The issue affects a button-collection inside a "popover" (in our case the options opened by a colvis button). The unwanted effect is that we're unable to keyboard-navigate over the button-collection by pressing TAB or SHIFT+TAB to jump focus from one button to the next; instead focus appears to be "locked" on the parent colvis button (that is, outside the button-collection).

The problem arises in this situation:
- We're using jQuery UI's dialog; we put our dataTable inside the dialog.
- We use a button-collection with our table, like a colvis button, and it is configured with 'fixed' layout.

The mechanism appears to be:
- jQuery UI's dialog implements a "focus trap" - listens for changes of focus, and if it escapes the dialog, it restores the focus to the first/last/last-focussed element inside the dialog (or something like that).
- DataTables' popover function implements a similar "focus trap" - also managing focus on its contained elements.
- These two features get into a conflict when used together, when the elements of dataTables's popover are not attached to the dialog. - Each "focus trap" tries to pull focus elsewhere.
- This is only an issue when using a 'fixed' layout for the popover - which causes the popover to be attached to the document's body, rather than the host button; it's not an issue otherwise.

We've recently updated our dataTables from v. 1.12 to v. 2.2; and we started seeing this issue only after that update. The relevant change must be this commit.

Now I'd like to ask if there is a workaround or a change of configuration that we may implement, or if this is rather something you might address in the core library?

Another minor thing, unrelated to the issue above, but in proximity to the code in question: There some places where events are triggered by the short-hand syntax .focus() instead of .trigger('focus'), and similarly for other event types elsewhere - that's deprecated in jQuery 3.

Thanks for maintaining this awesome library. I'm interested to see your opinion on this issue.