My issue: DropDown does not close on background click when NgSelect in Popup

[fspezi]

I have an Issue in my code that I can't resolve.
Can someone help me?
I need to know where is the piece of code that manage the closing of Dropdown on click out of ng-select element.

Expected behaviour

When dropdown is opened, I expect that it will close on click to any point of screen.

Actual behaviour

The dropdown do not close. ng-select close dropdown on select to item or click to little arrow only.

More Info

ng-select version: 0.36.2

browser: Chrome 65.0.3325.18

reproducible in demo page: NO

The NgSelect is drown inside Bootstrap Popup.
The Popup size is equal to entire window.
Popup position css style is "fixed".

[anjmao]

Hi @fspezi, ng-select creats invisible overlay, and it looks like modal window and overlay z-index values are not correct. As a quick fix you can solve it by making your modal z-index smaller than ng-select overlay, which modal are you using?

[fspezi]

Thanks for your support.
I found the ng-overlay-container inside ng-control.

And now I understand that... the problem is not the Modal (z-index 2000) but a slideshow that it contains.
I am using slideshow to develop a wizard.
The slideshow contains 4 pages, ng-select is inside the second page. The ng-overlay-container is drawn like in first page because the slideshow uses transform css attribute.

Then if ng-overlay-container was injected as sibling of ng-dropdown-panel, my page would work well. They does not sibling when appendTo="body".

[anjmao]

This is related to #313
Overlay is created inside ng-select container which is not correct, because it will not be possible to set correct z-index in some cases like this because of z-context layout. I will revert to previous implementation which was not using overlay to close dropdown https://github.com/ng-select/ng-select/blob/navigation-fix/src/ng-select/ng-select.component.ts#L455.