Hello Wai Jun,

Thank you for sharing the issue you're facing with the IgxOverlayService and the Single Select ComboBox Component. I apologize for the inconvenience this has caused.

Based on the information you've provided, it seems like there might be a conflict between the overlay of the ComboBox component and the overlay created by the IgxOverlayService. This could be causing the ComboBox dropdown to be sent to the background, making it unable to be closed.

Here are a few suggestions that might help resolve this issue:

Manage the Overlay Stacking Context: You can try to manage the stacking context of the overlays by setting the zIndex property of the IgxOverlayService and the ComboBox component. This will ensure that the ComboBox dropdown is always on top of the IgxOverlayService.

// In your component
constructor(private overlayService: IgxOverlayService) {}

ngOnInit() {
this.overlayService.attach(myOverlayRef, {
positionStrategy: new GlobalPositionStrategy(),
scrollStrategy: new CloseScrollStrategy(),
modalBackdrop: true,
closeOnOutsideClick: true,
zIndex: 1000, // Set a high zIndex to ensure the overlay is on top
});
}

Edited by slope 1 day ago

Hello,

Thank you for bringing this issue to our attention. From your description, it seems that there is a problem with the z-index stacking order and event handling when using the IgxOverlayService alongside the Single Select ComboBox Component. This can sometimes cause overlays to obscure dropdowns or prevent them from being closed properly.

To assist you further, could you please provide more detailed information or examples that illustrate the behavior you're experiencing? Screenshots, a video recording, or even a code snippet demonstrating how you are using the IgxOverlayService and ComboBox together would be very helpful in diagnosing the issue accurately.

From what I gather based on your description, it appears that the overlay attached by IgxOverlayService might be overlapping the ComboBox dropdown due to a higher z-index. Normally, overlays have a higher z-index to appear above other elements on the page. If you intend for users to interact with elements below the overlay, you may need to adjust the z-index of those elements accordingly.

/* Add this CSS to your component's stylesheet */

selector {

    z-index: 10001; /* Adjust this value as needed */

}

If you could provide an isolated sample that reproduces this behavior, it would greatly assist us in identifying the root cause and providing a solution. This would allow us to investigate further and offer targeted guidance on how to resolve the issue effectively.

Looking forward to your response and any additional details you can provide.

Thank you for your patience and cooperation.

Regards,

Georgi Anastasov

Entry Level Software Developer

Infragistics