likeastore / ngDialog

Modals and popups provider for Angular.js applications
http://likeastore.github.io/ngDialog
3.14k stars 692 forks source link

Fix getActiveDialog to accept different appendTo values #558

Open acalvo opened 7 years ago

acalvo commented 7 years ago

The getActiveDialog private function is currently used to handle the TAB key in case trapFocus is true. The function returns the last '.ngdialog' in the DOM, which is normally the active dialog, but as noted in a comment in the source code, this doesn't work in case of mixed 'appendTo' values. You might be opening a second dialog somewhere before in the DOM which is actually the active one, because due to a higher z-index value it's the one being shown on the top.

This caused the TAB key not to work properly in those cases of mixed 'appendTo' values. Here's a demo of the problem: https://jsfiddle.net/r6fr5wz0/ Click on "open second dialog" and then press TAB. The result will be that the focus goes back to the first dialog (as it is the active one according to getActiveDialog for being the latest in the DOM) while the expected behaviour would be to stay in the second one.

My PR fixes this problem. It goes over the openIdStack getting the highest z-index. In case it's the same among two dialogs, then it checks the order in the DOM. This makes getActiveDialog always return the topmost dialog.

The previous demo with my PR applied: https://jsfiddle.net/55jwo3sb/