Opening a modal directly after dismissing a modal returns focus to the page

[rveerd]

Bug description:

When you open a modal directly after dismissing a modal, the focus returns to the page instead of to the newly opened modal. Even when using ngbAutoFocus.

This is especially an issue for users using the keyboard because focus returns to the button that initially opened the first modal. When a user expects to dismiss the second modal by pressing Enter or Space, this will actually trigger this button, and yet another modal will open. See StackBlitz.

This seems to be a timing issue. The issue does not seem to occur when wrapping opening the second modal in setTimeout(). This could be used as a workaround.

Another workaround is to disable the button on the page. However this still requires the user to navigate to the correct button in the modal using the Tab key.

Link to minimally-working StackBlitz that reproduces the issue:

https://stackblitz.com/edit/ngb-issue-modal-on-modal-focus

Versions of Angular, ng-bootstrap and Bootstrap:

Angular: 9.1.9

ng-bootstrap: 6.1.0

Bootstrap: 4.5.0

[maxokorokov]

Looks like in modal-window.ts:

• when opening modal we're focusing something inside synchronously in ngAfterViewInit
• when closing modal we're restoring focus asynchronously with setTimeout in ngOnDestroy

So this should explain the issue to me.

[benouat]

Oh you're right @maxokorokov !
I think we should unify the focus management to be always asynchronous, and to be run outside of the zone, at the end of the microstask queue (i.e. at the end of the next tick execution).

I'll try to experiment that, and open a PR accordingly.