Trouble adding text input directly into dat.gui when working with three.js

Question

I am having a few problems with dat.gui when using three.js where the user cannot manually type input into the gui. Parameters with integers do not change until the user clicks on their text box. When that happens, they change only by the movement of the mouse - as in moving the cursor up will increase the value and down will decrease it. The user cannot enter a value for these parameters. The gui’s size is also not stable. When the user clicks on it any way, its width and height change like the values of the integer’s parameters do.

When I tested my dat.gui in an environment with no three.js components, I found that my issues are similar to when the user clicks on an input box and holds their cursor down, then moving their mouse around. The size of the gui remains the same though when testing like this.

Do you have any idea what might be going on?

Below is my code -

< body >
<script type='text/javascript' src='DAT.GUI.min.js'></script>
<script type="text/javascript">
    var gui = new dat.GUI();
    var coordinates = {
        x: 0,
        y: 0,
        z: 0
    };
    var labels = {
        name: "New Node"
    };  
    var obj = { 
        add:function(){ 
            var x = coordinates.x;
            var y = coordinates.y;
            var z = coordinates.z;
            var nodeName = labels.name;

            //Currently printing to console to see what I get
            console.log(nodeName);
            console.log("X: " + x);     
            console.log("Y: " + y);
            console.log("Z: " + z);
    }
    var f2 = gui.addFolder('Coordinates');
        f2.add(coordinates, 'x');
        f2.add(coordinates, 'y');
        f2.add(coordinates, 'z');
    gui.add(labels, 'name');    
    gui.add(obj,'add'); 
</script>
</body>

Below is the three.js code. This is taken from this three.js example - http://threejs.org/examples/#webgl_interactive_cubes

<script>
     //DAT.GUI CODE - SEE ABOVE
</script>
<script>
var populations = prompt("How many Nodes?");

var container, stats;
var camera, controls, scene, renderer;
var pickingData = [], pickingTexture, pickingScene;
var objects = [];
var highlightBox;
var mouse = new THREE.Vector2();
var offset = new THREE.Vector3( 10, 10, 10 );

init();
animate();

function init() {
    //Initialize Container
    //Initialize Camera
    //Initialize Controls
    //Initialize Scene
    //Initialize pickingScene
    //Initialize pickingTexture
    //Initialize light and add to scene
    //Initialize geometry, pickingGeometry, pickingMaterial, and defaultMaterial

    ...

    var drawnObject = new THREE.Mesh( geometry, defaultMaterial );
    scene.add( drawnObject );

    pickingScene.add( new THREE.Mesh( pickingGeometry, pickingMaterial ) );

    highlightBox = new THREE.Mesh(
        new THREE.BoxGeometry( 1, 1, 1 ),
        new THREE.MeshLambertMaterial( { color: 0xffff00 }) 
    );
    scene.add( highlightBox );

    projector = new THREE.Projector();

    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setClearColor( 0xffffff, 1 );
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.sortObjects = false;
    container.appendChild( renderer.domElement );

    stats = new Stats();
    stats.domElement.style.position = 'absolute';
    stats.domElement.style.top = '0px';
    container.appendChild( stats.domElement );

    renderer.domElement.addEventListener( 'mousemove', onMouseMove );
}

...

function pick() {
    renderer.render( pickingScene, camera, pickingTexture );
    var gl = self.renderer.getContext();
    var pixelBuffer = new Uint8Array( 4 );
    gl.readPixels( mouse.x, pickingTexture.height - mouse.y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixelBuffer );
    var id = ( pixelBuffer[0] << 16 ) | ( pixelBuffer[1] << 8 ) | ( pixelBuffer[2] );
    var data = pickingData[ id ];
    if ( data) {
        //move our highlightBox so that it surrounds the picked object
        if ( data.position && data.rotation && data.scale ){

            highlightBox.position.copy( data.position );
            highlightBox.rotation.copy( data.rotation );
            highlightBox.scale.copy( data.scale ).add( offset );
            highlightBox.visible = true;
        }
    } else {
        highlightBox.visible = false;
    }
}

...

</script>

I'm changing the z-indexes of the css elements in DAT.GUI.min.js to be extremely positive, hoping that will place the gui above the canvas. I am unable to find the zIndex of the WebGL canvas in the code or any of the .js script source files. However, I am unfortunately having the same problem where the user can see the gui, is able to highlight the input boxes, but cannot type any values into the gui.

 .dg.a {
 ...
 .dg.a .save-row {
  position: fixed;
  top: 0;
  z-index: 999999;** // From z-index: 1002; to move gui to the fore-front}

  ...

  .dg.ac {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  z-index: 9999; // from z-index: 0; to move gui to the fore-front }

  .dg .selector {
  display: none;
  position: absolute;
  margin-left: -9px;
  margin-top: 23px;
  z-index: 99999; } // from  z-index: 10; to move gui to the fore-front