Typeahead z-index problem when used inside Modal

Bug description:

When using container="body" on Typeahead, and placing Typeahead inside Modal, I am seeing the Typeahead’s dropdpown appear behind the Modal in the z-index order. (Typeahead dropdown z-index is 1000 while Modal is 1050).

Please see the attached Stackblitz.

Link to minimally-working StackBlitz that reproduces the issue:

https://stackblitz.com/edit/angular-7dfepa

1. Open the modal by clicking “Launch Demo Modal”
2. Interact with the first Typeahead (type “te”) - notice it works fine
3. Interact with the second Typeahead (type “te”) - noticed there is no dropdown visible on the screen. Using Chrome Element Inspector we can see that the <ngb-typeahead-window> appended to body has a class of .dropdown-menu setting the z-index of 1000 (below the modal of 1050).
4. Push down arrow key of keyboard, then enter key of keyboard, to select invisible 1st option of Typeahead.
5. Interact with the Dropdown, notice it works correctly, this also is using container="body", I see a dynamically added z-index on the element style, presumably by ngb code.

Versions of Angular, ng-bootstrap and Bootstrap:

Angular: 9.1.0

ng-bootstrap: 6.1.0

Bootstrap: 4.3.0

Thanks

Thank you team, we ❤️ ng-bootstrap lib!

[FirstVertex]

As a temporary workaround, I am applying the following CSS at the global level

ngb-modal-window + ngb-typeahead-window.dropdown-menu {
    z-index: 1051;
}

[eliprand]

@benouat would you consider adding an option for a custom CSS class to be applied to that ngb-typeahead-window ? similar to the windowClass on the Modal control. With that, we could set the z-index on the typeahead inside our modal as-needed without having to influence all typeaheads as is the case with the workaround. I would be happy to work on the implementation if that’s something that could be considered. Merci 😉