I have a sidebar on my page containing a form and some filters. The sidebar is initially collapsed and can be expanded when hovering over via a 'mouseenter' event, and will collapse when the mouse leaves the sidebar via a 'mouseover' event. This seems to work well, but I had an error when trying to add a input field in my form containing a datalist with a list of text options. The problem now is that when I hover over the options, the sidebar will trigger a 'mouseleave' event and collapse, even though the datalist/option elements are a child of the sidebar element. Is there a way to prevent the sidebar from collapsing or am I better off using select instead of datalist, since the select tag seems to not trigger 'mouseleave'?
let sidebar = document.getElementById("sidebar");
sidebar.addEventListener("mouseenter", function(e) {
toggleSidebar(e, BODY_CONTENT);
});
sidebar.addEventListener("mouseleave", function(e) {
toggleSidebar(e, BODY_CONTENT);
});
function toggleSidebar(e, bodyContent) {
if (e.type == "mouseenter") {
e.target.style.width = e.target.dataset.expandWidth + "px";
document.getElementById(bodyContent).style.marginLeft =
e.target.dataset.expandWidth + "px";
} else if (e.type == "mouseleave") {
console.log(e);
e.target.style.width = e.target.dataset.collapseWidth + "px";
document.getElementById(bodyContent).style.marginLeft =
parseInt(e.target.dataset.collapseWidth) + 10 + "px";
}
}<div class="sidebar" id="sidebar" data-collapse-width="50" data-expand-width="300" style="width: 50px;">
<div id="flex-sidebar">
<div class="sidebar-header">
<h2>
Filters
</h2>
</div>
<form action="" method="POST" autocomplete="off">
<div class="form-group">
<label for="category-filter">Category:</label>
<input class="form-control me-2" type="search" placeholder="Filter Category" name="category-filter" value="" list="test">
<datalist class="sidebar-dropdown" id="test">
<option value="Option 1">1</option>
<option value="Option 2">2</option>
</datalist>
</div>
</form>
</div>
</div>