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?

Looks like the event is bubbling to the children of the intended element `.side-menu`. Try to add `event.stopPropagation();` at the start of the mouseout function. Also try ti give `.side-menu` a `height:auto` on the css. — Abana Clara, Feb 13 '18 at 02:31
Thanks for the reply, @Merigold. Unfortunately, it did not work. My changed were: $(".side-menu").mouseout(function() { event.stopPropagation() $(this).css("width","60px") }); and added ["height": "auto",] to the [$(".side-menu").css({] — Oliver Drummond, Feb 13 '18 at 02:45
Weird, the element is actually quite small. (Updating the question with the element HTML) — Oliver Drummond, Feb 13 '18 at 03:18
What element is quite small? If it's the side menu then there's your problem — Abana Clara, Feb 13 '18 at 03:34
The side menu expands to 300px and the drop-down only has 81px. — Oliver Drummond, Feb 13 '18 at 03:37
Does the drop down options go outside that 300px range at the bottom? — Abana Clara, Feb 13 '18 at 03:40
It does? Jesus christ. I thought your case is something like this https://imgur.com/a/nh29X — Abana Clara, Feb 13 '18 at 03:44
Yes, the original file is. But, after your comments, I've tried to change the elements height (and width), but the same thing keeps happening. This image shows the big one that still closes if I hover on one of the drop-down options. https://imgur.com/a/WewjY — Oliver Drummond, Feb 13 '18 at 03:50
For now, what I did was to create this REALLY UGLY workaround: Added a new class to the span that gives me the error (class="spota filter") and create a new JS script for that: $(".spota.filter").mouseout(function () { event.stopPropagation(); }); It's ugly and the side menu does not close if you mouse out to the right of this element, but is the best alternative that I got so far. — Oliver Drummond, Feb 13 '18 at 03:53
@OliverDrummond have you tried the mouseleave event instead of mouseout? I never use mouseout and thus i dont encounter such weird problems like this. I heard these two differs in the way they handle stuff. https://stackoverflow.com/questions/4258615/what-is-the-difference-between-jquerys-mouseout-and-mouseleave — Abana Clara, Feb 13 '18 at 04:40
@Merigold. Just tried mouseleave, but the same error keeps happening. So frustrating. — Oliver Drummond, Feb 13 '18 at 05:16
No worries, @Merigold. You helped me a lot! Thanks for all the effort! — Oliver Drummond, Feb 13 '18 at 05:57
did Merigold help you solve the issue? if not, can you clarify if this is happening in the desktop client or the web client please? — niko, Feb 13 '18 at 16:47
Hello, @niko. His "event.stopPropagation()" clue helped me to create a workaround, but the main problem is still there. This is happening on both clients (but I'm mostly focused on the desktop). — Oliver Drummond, Feb 13 '18 at 23:13

score 2 · Accepted Answer · answered Feb 15 '18 at 03:00

2

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.

answered Feb 15 '18 at 03:00

Pedro Nametala

30
3

PERFECT!! Worked like a charm!! – Oliver Drummond Feb 15 '18 at 03:02

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

1 Answers1