Drop down menu not work

Question

I'm developing an easy web application, and I'm using two js libraries: dat.gui and three.js.

My problem is the drop down menu is locked. I can't open it.

// gui initialization (dat.gui)
function initGui() {

    var Options = function() {
        this.tenda = 'bar';
    };

    config = new Options();
    var gui = new dat.GUI();
    var subGui = gui.addFolder('Setting');
    subGui.open();

    // callbacks
    subGui.add( config, 'tenda', ['bar', 'pie', 'area']).
        onChange(
            function() {
                if (config.tenda === 'bar') { ... }
                else if (config.tenda === 'pie') { ... }
                else if (config.tenda === 'area') { ... }
            }
        );
};

Reading on the web, it seems to be a known issue, but in some examples, I see the drop down menus working well. I'm new to js, and I thought "maybe there is some scoping issue", so I put the initialization process inside a function that does the work. But the problem remains.

I'm working on Ubuntu/Chrome and Ubuntu/Firefox. You could check the entire code here, where I use check boxes instead of a drop down menu.

Answer 1

I face the same problem. In my code, I have changed:

var controls = new THREE.OrbitControls(camera);

to

var controls = new THREE.OrbitControls(camera, renderer.domElement);

Answer 2

I face the same problem. In my code, I listen the mouse click event. and the callback function like that:

function onDocumentMouseDown( event ) {
    event.preventDefault();

    ... //other code
}

I found out that the problem is "event.preventDefault();", that will prevent clicking on the drop down list, so by commenting it, my problems solved. you can also check other functions which related with mouse click event.