JSFiddle - React, Tailwind, and code Playground

by kaushal98

HTML

<div id="wrap">Please run the fiddle in Chrome and Firefox. Bug occurs in Firefox only. Firefox automatically selects the drop down item on mouse hover without clicking.
    <br>
    <select id="menu_One">
        <option>Menu One 1</option>
        <option>Menu One 2</option>
        <option>Menu One 3</option>
        <option>Menu One 4</option>
        <option>Menu One 5</option>
    </select>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <div id="onMouserRover"></div>
    <div id="onClickEvent"></div>
</div>

CSS

* {
        margin:0;
        padding:0;
    }
    body {
        background:#eee;
    }
    #wrap {
        max-width:800px;
        margin:0 auto;
        background:#fff;
        height:1000px;
        padding:50px;
    }

JavaScript

var select_two = "<select id='menu_Two'>";
        select_two += "<option>Menu Two 1</option>";
        select_two += "<option>Menu Two 2</option>";
        select_two += "<option>Menu Two 3</option>";
        select_two += "<option>Menu Two 4</option>";
        select_two += "</select>";

        var eDeviceSelectId = document.getElementById("menu_One");
        var device = eDeviceSelectId.options[eDeviceSelectId.selectedIndex].value;
        var div1 = document.getElementById('onMouserRover');
        var div2 = document.getElementById('onClickEvent');

        /* Item selected event listener */
        eDeviceSelectId.addEventListener('change', function (event) {
            device = eDeviceSelectId.options[eDeviceSelectId.selectedIndex].value;
            div2.innerHTML = device;
        }, false);

        setInterval(function () {
            device = eDeviceSelectId.options[eDeviceSelectId.selectedIndex].value;
            div1.innerHTML = device;
        }, 2000);