Dropdownlist works on chrome but not in firefox bcos of false mouseOut event in firefox

Ask the community
,
1

Steps to reproduce:-
False firefox mouseOut in dropdownlist:-

  1. Create a dropdownlist.
  2. Add mouseout event to dropdownlist (eg. blur() or anything else).
  3. Click on dropdownlist
  4. Dropdown will show list, Click on item in list (This 4th step fails on firefox bcos firefox triggers dropdownlist-mouseout event. It works in all other browsers like chrome or edge).
    Example:
    export function dropdownlist1_mouseOut(event) {
    $w(“#dropdownlist1”).blur();
    }

False firefox mouseOut in container:-

  1. Create a container & attach dropdownlist to container.
  2. Remove mouseout event from dropdownlist.
  3. Add mouseout event to container.
  4. Click on dropdownlist.
  5. Drop down will show list, Click on item in list ( This 4th step fails on firefox bcos firefox triggers container-mouseout event. It works in all other browsers like chrome or edge).
    Example:
    export function container1_mouseOut(event) {
    $w(“#container1”).collapse();
    }

Steps on website:-

  1. Open website www.takece.com
  2. Click on “Course Menu” in header.
  3. Click on “ARRT by State”.
  4. Select state from list (this step works in chrome but not in firefox. it fails in firefox due to false mouseout event).
2

Yes so it is an issue with Mozilla Firefox which you will need to investigate yourself.

If it all works fine in all other browsers than it can’t be a code issue and therefore this Wix Corvid Forum can’t help you as it can’t provide you with code that would work specifically on Mozilla Firefox only and not on Microsoft Edge or Google Chrome or Apple Safari etc.

What you might find happening is that Mozilla Firefox is only seeing the dropdown element itself and is not including the actual dropdown list as part of the element, so when you move the mouse away from the dropdown element the onMouseOut event handler function will kick in and it will blur, or do whatever else you have setup on it.

The issue on your Mozilla Firefox site is that the onMouseOut event handler function is probably only working on the dropdown menu itself, once you move the mouse away from the dropdown element it will go off.

You would be better off using a seperate container that appears when the user clicks on an arrow icon so that you can use onMouseout on that container too and not just the dropdown element itself.

3

Thanks. I will investigate firefox behaviour.

4

You might be better off doing something like this.
https://www.youtube.com/watch?v=HmTkf5af0NE
https://codequeen.wixsite.com/double-collapse

Or look at these examples.
https://www.wix.com/corvid/example/collapse-elements
https://www.wix.com/corvid/example/mega-menu

5

Mousein and mouseover behave differently, and some browsers assume you want one over the other. If you’re looking for the technical reason it happens, look up event bubbling.