Dropdown: Keyboard navigation not working when encapsulated in shadow DOM

[nextgovitAS]

Description:

The dropdown menu of the dropdown component cannot be navigated properly with the arrow keys when the component is used within a component with encapsulation: ViewEncapsulation.ShadowDom.

StackBlitz:

https://stackblitz.com/edit/angular-1fdepu?file=src%2Fapp%2Fdropdown-basic.ts

Versions

Angular: v16.1
ng-bootstrap: v15.1
Bootstrap: v5.2.3

[maxokorokov]

Looks like activeElement points to the shadow root (ngbd-dropdown-basic component), not the actual item in this case:

ng-bootstrap/src/dropdown/dropdown.ts

Lines 404 to 406 in 107bbbd

	if (item === this._document.activeElement) {
	position = index;
	}

Should be this._document.activeElement.shadowRoot.activeElement:

https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/activeElement

So we actually might need something like getActiveElement() utility I guess.

FYI @fbasso, @divdavem