Mouse out event being generated when inside drop-down list options

Question

I'm having an annoying problem while using Spotfire. It happens both in Desktop (my main focus) and Web Client.

I've created a menu that collapses when the uses hover the mouse over it and everything is working perfectly. Well, almost everything.

For whatever the reason, once I try to click on one of the options from the drop-down list that I have inside this menu, the menu closes completely like a Mouseout event has been created.

If i hover the mouse over "Active Only" or "Inactive Only", the menu closes and turns into this (which is the expected behaviour for a Mouseout event)

--

Here is the code used:

$(".side-menu").mouseover(function() {
  $(this).css("width", "350px")
});

$(".side-menu").mouseout(function() {
  $(this).css("width", "60px")
});

$(".spota").mouseover(function() {
  $(this).css("background", "#FEB338")
});

$(".spota").mouseout(function() {
  $(this).css("background", "transparent")
});

$(".sel").css({
  "display": "'none",
  "background": "#FEB338"
})

$(".side-menu").css({
  "font-family": "'Roboto', sans-serif",
  "position": "fixed",
  "top": "210px",
  "left": "10",
  "margin": "0",
  "padding": "0",

  "width": "60px",
  "list-style-type": "none",
  "background": "#404040",
  "overflow": "hidden",
  "z-index": "99999",
  "transition": "width 1s"
});

$(".fa").css({
  "font-size": "1rem",
  "margin": "20px 30px 0 22px"
});

$(".spota").css({
  "display": "block",
  "font-size": ".9rem",
  "text-decoration": "none",
  "color": "#FFF",
  "height": "60px"
});

$(".spotli").css({
  "width": "350px"
});

.filter-names {
  font-size: 13px;
  color: white
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="side-menu" style="overflow:hidden; bottom:28px;">
  <li class="spotli">
    <a class="spota sel" href="#">
      <span class="fa fa-search-plus" aria-hidden="true"></span>
      <span class="filter-names">Case Filter In: <SpotfireControl id="5d0043f39e1d42a5b7e8b1833f4586fa" /></span>
    </a>
  </li>
  <li class="spotli">
    <a class="spota" href="#">
      <span class="fa fa-search-minus" aria-hidden="true"></span>
      <span class="filter-names">Case Filter Out: <SpotfireControl id="59f89f10d0db4d22a096526bdd118cab" /></span>
    </a>
  </li>
  <li class="spotli">
    <a class="spota" href="#">
      <span class="fa fa-wpforms" aria-hidden="true"></span>
      <span class="filter-names">Show Cases: <SpotfireControl id="51adc4b41ba9403bb63e67e87d9d5ba8" /></span>
    </a>
  </li>
</ul>

This is the HTML from the drop-down element:

<span class="filter-names">Show Cases:
    <span id="7a9723d293f9417f8ec57a9662bc290c" style="display: inline-block;" class="sf-element sf-element-control sfc-property sfc-dropdown">
        <div class="sf-element sf-element-dropdown" title="" style="position: relative; width: 81px;">
            <div class="sf-element sf-element-icon" style="position: absolute; top: 1px; left: 71px; height: 18px; width: 18px;">
                <svg width="18px" height="18px">
                    <path d="M4,6 l7,0 l-3.5,3.5 z" fill="currentColor" stroke-width="1" transform="scale(1.2,1.2)" class="Down"></path>
                </svg>
            </div>
            <div class="sf-element sf-element-text-box" style="display: inline-block; word-wrap: break-word; width: 63px;">Inactive ...</div>
            <select class="sf-dropdown-select" style="color: rgb(255, 255, 255); font-family: Arial; background-color: rgb(0,0,0);">
                <option value="0">Any</option>
                <option value="1">Active Only</option>
                <option value="2" selected="selected">Inactive Only</option>
            </select>
        </div>
    </span>
</span>

Have anyone ever seen anything like that?

Answer 1

You can use the given id from the Spotfire element to use the event.stopPropagation() for .side-menu.

Something like

$(".spota.filter #51adc4b41ba9403bb63e67e87d9d5ba8").mouseout(function () {
    event.stopPropagation();
});

This will trigger the stop propagation for the menu, preventing it from collapsing and triggering again the mouseover event.