SmartDropDownList in SmartWindow doesn't work correctly

[Tr12]

Hi, I’m trying to display a smart-drop-down-list within the contents of a smart-window. However, I faced some issues:

1. When clicking on the drop-down list, the box containing the items is cut off before the window’s footer area, instead of being displayed in the foreground.
2. When closing the drop-down-list, the Window’s “close” event is fired even though the window doesn’t close.

Please see the following sample screenshot:

You can see that the dropdown area isn’t displayed in the foreground.
Additionally, when you add an event listener to the Window element, like this:
dialog.addEventListener(“close”, evt => {
alert(“Window closed”);
});
you can see that the “alert” box is shown when you close the drop-down list, even though the window stays open.
The JavaScript code which I used looks like this (the HTML page includes JQuery):

window.onload = () => {
let dialog = new window.Smart.Window();
dialog.style.width = "auto";
dialog.style.height = "auto";
dialog.modal = true;
dialog.addEventListener("close", evt => {
alert("Window closed");
});
let footerTemplate = document.createElement("template");
footerTemplate.innerHTML = "<smart-button style='width: 100px;'>OK</smart-button><smart-button style='width: 100px;'>Cancel</smart-botton>";
dialog.footerTemplate = footerTemplate;
$(dialog).append(
$("<table>").append(
$("<tr>").append(
$("<td>").append("Row1"),
$("<td>").append(
$("<smart-drop-down-list>").append(
$("<smart-list-item>", { value: "A" }).text("Item A"),
$("<smart-list-item>", { value: "B" }).text("Item B"),
$("<smart-list-item>", { value: "C" }).text("Item C"),
$("<smart-list-item>", { value: "D" }).text("Item D"),
$("<smart-list-item>", { value: "E" }).text("Item E"),
$("<smart-list-item>", { value: "F" }).text("Item F"),
$("<smart-list-item>", { value: "G" }).text("Item G"),
)
)
),
$("<tr>").append(
$("<td>").append("Row2"),
$("<td>").append(
$("<smart-drop-down-list>").append(
$("<smart-list-item>", { value: "A" }).text("Item A"),
$("<smart-list-item>", { value: "B" }).text("Item B"),
$("<smart-list-item>", { value: "C" }).text("Item C"),
$("<smart-list-item>", { value: "D" }).text("Item D"),
$("<smart-list-item>", { value: "E" }).text("Item E"),
$("<smart-list-item>", { value: "F" }).text("Item F"),
$("<smart-list-item>", { value: "G" }).text("Item G"),
)
)
),
$("<tr>").append(
$("<td>").append("Row3"),
$("<td>").append(
$("<span>").text("Text")
)
)
)
);
document.body.appendChild(dialog);
dialog.open();
};

 
Thank you

[admin]

Hi Tr12,
1. If you want the dropdownlist’s dropDown to be not hosted by its container, use the dropDownAppendTo property and set it to ‘body’. That way,its bounds would not be restricted by the container’s size. See the property here: https://www.htmlelements.com/docs/dropdownlist-api/#toc-dropdownappendto_any
2. In Javascript Events Bubble. As the dropDownList also has a ‘close’ event it bubbles up to the document. This behavior is correct.
Best Regards,
Peter Stoev
Smart HTML Elements
https://www.htmlelements.com/

[Tr12]

Hi Peter,
thank you, setting dropDownAppendTo to the body element worked.
Regarding event bubbling, thank you for the explanation. I was able to fix the issue by checking if event.target == windowElement, and otherwise ignore the event.
Thanks

[Author]

Posts