here are snippets from the azure maps sample I have, sorry this code is not ready for publishing yet so just use this as reference.
1. Add a div for the pop out container _popupServiceDialogDiv is class variable here
private renderDropDrownDialog() {
this._popupServiceDialogDiv = document.createElement("div");
this._popupServiceDialogDiv.id = "autoCompleteSamplePopupDialog";
this._popupServiceDialogDiv.setAttribute("role", "dialog");
this._popupServiceDialogDiv.style.height = "100%";
let ul = document.createElement("ul");
ul.setAttribute("id", "entityListUl");
ul.addEventListener("click", this.itemClick.bind(this));
for (let i = 0; i < this.optionListItems.length; i++) {
let listItem = document.createElement("li");
let testNode = document.createTextNode(this.optionListItems[i]);
listItem.setAttribute("addJson", this.optionListItemsJson[i]);
listItem.appendChild(testNode);
ul.appendChild(listItem);
}
this._popupServiceDialogDiv.appendChild(ul);
return this._popupServiceDialogDiv;
}
2. Call above when the popup needs to be rendered
public renderPopup(event?: any) {
let popupContent = this.renderDropDrownDialog();
if (this._popupServiceDialogDiv) {
const popupService = this._context.factory.getPopupService() as any;
const popupProps: any = {
name: POPUP_SERVICE_NAME,
popupToOpen: POPUP_SERVICE_NAME,
closeOnOutsideClick: true, //This prop takes popup out of visibility but element still remains on DOM
onPopupForcedClosed: this.closePopupDialog.bind(this),//This prop is set to a method to actually close the popup dialog
popupStyle: {
"width": "auto",
"height": `${HEIGHT}px`,
"border": "1px solid #666666",
"boxShadow": "0px 2px 4px 0px rgba(0, 0, 0, 0.5);",
"overflow": "hidden",
"backgroundColor": "white",
"display": "flex",
"top": `${this.TopOffset}px`,
"left": `${this.LeftOffset}px`,
"flexDirection": "column",
"position": "absolute",
"margin-top": 28 + "px"
},
shadowStyle: {
position: "absolute",
width: "100%",
height: "100%"
},
type: 1,
content: popupContent
};
if (popupService.getPopupsId()) {
popupService.updatePopup(POPUP_SERVICE_NAME, popupProps)
}
else {
popupService.setPopupsId(POPUP_SERVICE_NAME);
popupService.createPopup(popupProps);
}
this.inputElement.focus();
}
}
Alternatevely you can try adding z-index property to the drop down so that the overlay is on the top. Control container height can also be adjusted if you add height declaration to the div container.