form select cannot click on more than once

LefterisKoumis · ‎03-11-2016

I have this simple select dropdown and after I select it once, it freezes! However, if I remove the label of the next control (textbox) it works! Bizarre. How can the select work with the label of the textbox? Thank you.

HTML select freezes:

<script src="http://js.arcgis.com/3.14/"></script>    
  <script src="js/select.js"></script>  
  
</head>    
    
<body bgcolor="blue" class="claro">    
 <div style="margin-top: 40px">  
  
  
  
  
    <label data-dojo-attach-point="identifyFromLbl" id="lbl_subject" style="width:25%;margin-top:20px;margin-bottom:10px;margin-right:10px; margin-left: 40px; font-size: 1.25em; color:white ">Select a Subject Area </label>  
     <select style="margin-top:20px;margin-bottom:10px;" id="subject" data-dojo-attach-point="subject" data-dojo-type="dijit/form/Select" >           
     </select>  
    <br />  
      <label data-dojo-attach-point="identifyFromLbl" id="lbl_desc" style="width:25%; padding-top:40px;margin-bottom:10px;margin-right:10px; margin-left: 40px; margin-top: 20px; font-size: 1.25em; color:white;vertical-align: middle ">Enter a Project Description (optional): </label>  
    <input type="text"  style="margin-top: 20px; width:30em;vertical-align: middle" name="desc" value=""    data-dojo-type="dijit/form/TextBox"    data-dojo-props="trim:true, propercase:true" id="proj_desc" />   
    <div>  
      </div>  
      
</div>  
</body>

HTML select works:

  <script src="http://js.arcgis.com/3.14/"></script>    
  <script src="js/select.js"></script>  
  
</head>    
    
<body bgcolor="blue" class="claro">    
 <div style="margin-top: 40px">  
  
  
  
  
    <label data-dojo-attach-point="identifyFromLbl" id="lbl_subject" style="width:25%;margin-top:20px;margin-bottom:10px;margin-right:10px; margin-left: 40px; font-size: 1.25em; color:white ">Select a Subject Area </label>  
     <select style="margin-top:20px;margin-bottom:10px;" id="subject" data-dojo-attach-point="subject" data-dojo-type="dijit/form/Select" >           
     </select>  
    <br />  
     <input type="text"  style="margin-top: 20px; width:30em;vertical-align: middle" name="desc" value=""    data-dojo-type="dijit/form/TextBox"    data-dojo-props="trim:true, propercase:true" id="proj_desc" />   
    <div>  
      </div>  
      
</div>  
</body>

js:

require([ "dojo/ready",   
        "dojo/on",  
        "dojo/_base/connect",   
        "dojo/dom",  
        "dijit/registry",  
        "dojo/dom-construct",  
        "dojo/parser",  
        "esri/domUtils",        
  'dijit/_WidgetsInTemplateMixin',  
"dijit/Menu",   
    "dijit/MenuItem",'dijit/form/Select',  
  "dojo/domReady!"], function(  
  ready,   
        on,   
        connect,  
        dom,  
        registry,  
        domConstruct,  
        parser,  
        domUtils,  
  _WidgetsInTemplateMixin,  
   Menu, MenuItem, Select  
  ){  
  
  
  parser.parse();  
  setup_subject();  
  
  });  function setup_subject(){  
  dijit.registry.byId("subject").options.length = 0;  
  subjectlist= [];  
  subjectlist.push({label:"General Environmental", value: 0});  
  subjectlist.push({label:"Biology", value: 1});  
  subjectlist.push({label:"Haz Waste", value: 2});  
  subjectlist.push({label:"Air/Noise", value: 3});  
  subjectlist.push({label:"Water", value: 4});  
  dijit.registry.byId("subject").addOption({label:"Select Subject Area", value: 0});  
  dijit.registry.byId("subject").addOption(subjectlist);  
  
  
  
  }

RobertScheitlin__GISP · ‎03-11-2016

Lefteris,

Here is your code fixed and cleaned.

Things to consider:

Inline styles should be avoided if possible due to specificity
You do not need to use data-dojo-attach-point unless you are using it in a html templated widget/dijit
As above no need to include dijit/_WidgetsInTemplateMixin unless you are working with a dojo tmeplated widget
Your setup_subject was outside your require code block and thus your require codes scope.

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>something</title>

  <link rel="stylesheet" href="http://js.arcgis.com/3.16/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.16/esri/css/esri.css">
  <script src="http://js.arcgis.com/3.16/"></script>
  <!--<script src="js/select.js"></script>-->
  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
      background-color: blue;
    }

    .subject-label {
      width: 25%;
      margin-top: 20px;
      margin-bottom: 10px;
      margin-right: 10px;
      margin-left: 40px;
      font-size: 1.25em;
      color: white
    }

    .subject-select {
      margin-top: 20px;
      margin-bottom: 10px;
    }

    .desc-label {
      width: 25%;
      padding-top: 40px;
      margin-bottom: 10px;
      margin-right: 10px;
      margin-left: 40px;
      margin-top: 20px;
      font-size: 1.25em;
      color: white;
      vertical-align: middle;
    }

    .projectDesc-input {
      margin-top: 20px;
      width: 30em;
      vertical-align: middle;
    }

    .main-div {
      margin-top: 40px
    }
  </style>
  <script>
    require([
      "dojo/on",
      "dojo/dom",
      "dijit/registry",
      "dojo/dom-construct",
      "dojo/parser",
      "esri/domUtils",
      "dijit/Menu",
      "dijit/MenuItem",
      "dijit/form/Select",
      "dojo/domReady!"
    ], function (
      on,
      dom,
      registry,
      domConstruct,
      parser,
      domUtils,
      Menu,
      MenuItem,
      Select
    ) {
      parser.parse();
      setup_subject();

      function setup_subject() {
        dijit.registry.byId("subject").options.length = 0;
        subjectlist = [];
        subjectlist.push({
          label: "General Environmental",
          value: 0
        });
        subjectlist.push({
          label: "Biology",
          value: 1
        });
        subjectlist.push({
          label: "Haz Waste",
          value: 2
        });
        subjectlist.push({
          label: "Air/Noise",
          value: 3
        });
        subjectlist.push({
          label: "Water",
          value: 4
        });
        dijit.registry.byId("subject").addOption({
          label: "Select Subject Area",
          value: 0
        });
        dijit.registry.byId("subject").addOption(subjectlist);
      }
    });
  </script>
</head>


<body class="claro">
  <div class="main-div">
    <label id="lbl_subject" class="subject-label">Select a Subject Area </label>
    <select id="subject" class="subject-select" data-dojo-type="dijit/form/Select"></select>
    <br />
    <label id="lbl_desc" class="desc-label">Enter a Project Description (optional): </label>
    <input id="proj_desc"  type="text" class="projectDesc-input" value=""
           data-dojo-type="dijit/form/TextBox"
           data-dojo-props="trim:true, propercase:true" />
    <div></div>
  </div>
</body>

</html>

View solution in original post

RobertScheitlin__GISP · ‎03-11-2016

Lefteris,

Here is your code fixed and cleaned.

Things to consider:

Inline styles should be avoided if possible due to specificity
You do not need to use data-dojo-attach-point unless you are using it in a html templated widget/dijit
As above no need to include dijit/_WidgetsInTemplateMixin unless you are working with a dojo tmeplated widget
Your setup_subject was outside your require code block and thus your require codes scope.

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>something</title>

  <link rel="stylesheet" href="http://js.arcgis.com/3.16/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.16/esri/css/esri.css">
  <script src="http://js.arcgis.com/3.16/"></script>
  <!--<script src="js/select.js"></script>-->
  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
      background-color: blue;
    }

    .subject-label {
      width: 25%;
      margin-top: 20px;
      margin-bottom: 10px;
      margin-right: 10px;
      margin-left: 40px;
      font-size: 1.25em;
      color: white
    }

    .subject-select {
      margin-top: 20px;
      margin-bottom: 10px;
    }

    .desc-label {
      width: 25%;
      padding-top: 40px;
      margin-bottom: 10px;
      margin-right: 10px;
      margin-left: 40px;
      margin-top: 20px;
      font-size: 1.25em;
      color: white;
      vertical-align: middle;
    }

    .projectDesc-input {
      margin-top: 20px;
      width: 30em;
      vertical-align: middle;
    }

    .main-div {
      margin-top: 40px
    }
  </style>
  <script>
    require([
      "dojo/on",
      "dojo/dom",
      "dijit/registry",
      "dojo/dom-construct",
      "dojo/parser",
      "esri/domUtils",
      "dijit/Menu",
      "dijit/MenuItem",
      "dijit/form/Select",
      "dojo/domReady!"
    ], function (
      on,
      dom,
      registry,
      domConstruct,
      parser,
      domUtils,
      Menu,
      MenuItem,
      Select
    ) {
      parser.parse();
      setup_subject();

      function setup_subject() {
        dijit.registry.byId("subject").options.length = 0;
        subjectlist = [];
        subjectlist.push({
          label: "General Environmental",
          value: 0
        });
        subjectlist.push({
          label: "Biology",
          value: 1
        });
        subjectlist.push({
          label: "Haz Waste",
          value: 2
        });
        subjectlist.push({
          label: "Air/Noise",
          value: 3
        });
        subjectlist.push({
          label: "Water",
          value: 4
        });
        dijit.registry.byId("subject").addOption({
          label: "Select Subject Area",
          value: 0
        });
        dijit.registry.byId("subject").addOption(subjectlist);
      }
    });
  </script>
</head>


<body class="claro">
  <div class="main-div">
    <label id="lbl_subject" class="subject-label">Select a Subject Area </label>
    <select id="subject" class="subject-select" data-dojo-type="dijit/form/Select"></select>
    <br />
    <label id="lbl_desc" class="desc-label">Enter a Project Description (optional): </label>
    <input id="proj_desc"  type="text" class="projectDesc-input" value=""
           data-dojo-type="dijit/form/TextBox"
           data-dojo-props="trim:true, propercase:true" />
    <div></div>
  </div>
</body>

</html>

LefterisKoumis · ‎03-12-2016

Thank you Robert. The code I posted is actually a part of a much larger file. I removed chunks of code so I can post the issue I have.

The code you posted has the same issue as the one I encounter. After you click once in the select control, you cannot make anoher selection. It just freezes. So, I started thinking, perhaps it is a browser issue. It turned out that it is!! Chrome and MS Edge has this issue. Firefox (version 30.0) doesn't! So, the question is how to make this simple code compatible with all browsers.

Edit: 3/13/16

It seems that you can use the select the control without problems by using the keyboard only.

Like I stated in a previous posting, the issue does not exist, if I remove the:

<label id="lbl_desc" class="desc-label">Enter a Project Description (optional): </label>

Why???

RobertScheitlin__GISP · ‎03-13-2016

Lefteris,

All my previous suggestions still apply whether this was just a portion of your code or not.

The style positioning was causing you a problem.

I also added a form element and added the "for" property for your labels and adjusted the css.

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Create web map from id</title>

  <link rel="stylesheet" href="http://js.arcgis.com/3.16/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.16/esri/css/esri.css">
  <script src="http://js.arcgis.com/3.16/"></script>
  <!--<script src="js/select.js"></script>-->
  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
      background-color: blue;
    }

    .desc-label,
    .subject-label{
      width: 25%;
      font-size: 1.25em;
      color: white;
      vertical-align: middle;
      margin-right: 5px;
    }

    .projectDesc-input {
      width: 30em;
      vertical-align: middle;
    }

    .main-div {
      margin-top: 40px
    }

    .row {
      margin: 10px 10px;
    }
  </style>
  <script>
    require([
      "dojo/on",
      "dojo/dom",
      "dijit/registry",
      "dojo/dom-construct",
      "dojo/parser",
      "esri/domUtils",
      "dijit/Menu",
      "dijit/MenuItem",
      "dijit/form/Select",
      "dojo/domReady!"
    ], function (
      on,
      dom,
      registry,
      domConstruct,
      parser,
      domUtils,
      Menu,
      MenuItem,
      Select
    ) {
      parser.parse();
      setup_subject();

      function setup_subject() {
        dijit.registry.byId("subject").options.length = 0;
        subjectlist = [];
        subjectlist.push({
          label: "General Environmental",
          value: 0
        });
        subjectlist.push({
          label: "Biology",
          value: 1
        });
        subjectlist.push({
          label: "Haz Waste",
          value: 2
        });
        subjectlist.push({
          label: "Air/Noise",
          value: 3
        });
        subjectlist.push({
          label: "Water",
          value: 4
        });
        dijit.registry.byId("subject").addOption({
          label: "Select Subject Area",
          value: 0
        });
        dijit.registry.byId("subject").addOption(subjectlist);
      }
    });
  </script>
</head>

<body class="claro">
  <form class="main-div">
    <div class="row">
      <label for="subject" id="lbl_subject" class="subject-label" >Select a Subject Area:</label>
      <select id="subject" data-dojo-type="dijit/form/Select"></select>
    </div>
    <div class="row">
      <label for="proj_desc" class="desc-label">Enter a Project Description (optional):</label>
      <input id="proj_desc" type="text" class="projectDesc-input" value=""
             data-dojo-type="dijit/form/TextBox"
             data-dojo-props="trim:true, propercase:true">
    </div>
    <div></div>
  </form>
</body>

</html>