ngbAutofocus not working with Bootstrap 5.2.1

[bastienmoulia]

Bug description:

With the change of Bootstrap 5.2.1 (twbs/bootstrap#37026) :focus was replaced by :focus-visible. Since then ngbAutofocus is not working.

Link to minimally-working StackBlitz that reproduces the issue:

https://stackblitz.com/edit/angular-jxqgtu?file=src/index.html

Versions of Angular, ng-bootstrap and Bootstrap:

Angular: 14.2.10

ng-bootstrap: 13.1.0

Bootstrap: 5.2.1

[bastienmoulia]

There is an experimental option for .focus() called focusVisible. But it's only for Firefox for now:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#focus_on_a_button
https://caniuse.com/mdn-api_htmlelement_focus_options_focusvisible_parameter

[maxokorokov]

I'm not sure what we could do on our side at the moment... It's the way Bootstrap decides to display focus and as you say there is no way to force focus to be visible. If you open the modal with the keyboard, focus is shown fine, if you open with the mouse it is not.

On the other hand it works differently for the X button, that is focused consistently...

We could update the demo detailing the behaviour.

It is also the same for the datepicker inside the popup and the dropdown