Opened 9 years ago

Closed 9 years ago

#10493 closed defect (invalid)

tab indexes

Reported by: NateHmr Owned by:
Priority: high Milestone: tbd
Component: Dijit Version: 1.4.0
Keywords: Cc:
Blocked By: Blocking:

Description (last modified by bill)

tab indexes were working fine in 1.3. Now tabs do not work as desired. I created the desired outcome in 1.3 by using this code:

        dijit.byId("plantSelect").attr("tabIndex", 0);
        dijit.byId("dateSelect").attr("tabIndex", 0);
        dijit.byId("timeText").attr("tabIndex", 0);
        dijit.byId("submitButton").attr("tabIndex", 0);
        dijit.byId("clearButton").attr("tabIndex", 0);

Now, in 1.4, it will work correctly one time through when the page loads, but not after that: my domNodes are in a contentPane like this:

<div id="toolbar_div"
           dojoType="dijit.layout.ContentPane"
           region="top"
           role="banner"
           style="width: 100%;
                  margin: 0;
                  padding: 0;">

        <div id="toolbar1"
             dojoType="dijit.Toolbar">
          <span>&nbsp;</span>
          <span dojoType="dojo.data.ItemFileReadStore" 
                jsId ="plantStore" 
                url="resources/json/plantStore.json">
          </span>
          <img src="resources/icons/wall_brick.png" 
               align="absmiddle" 
               onClick = 'highlightText("plantSelect");'>
          </img>
          <input dojoType="dijit.form.ComboBox"
                 value="Select a Plant..."
                 id="plantSelect"
                 name="plant"
                 style="width:40mm"
                 store="plantStore"
                 searchAttr="name"
                 onClick="clearText();"
                 onBlur="comboBoxDefaultText();">
          </input>
          <span dojoType="dijit.ToolbarSeparator">
            &nbsp;
          </span>
          <img src="resources/icons/calendar_2.png" 
               align = "absmiddle" 
               onClick = "focusOnCalendar();">
          </img>
          <input dojoType="dijit.form.DateTextBox" 
                 id="dateSelect"
                 name="date"
                 required="true"
                 onClick="highlightText('dateSelect');">
          </input>
          <span dojoType="dijit.ToolbarSeparator">
            &nbsp;
          </span>
          <img id="clockImg" 
               src="resources/icons/clock.png" 
               align="absmiddle" 
               onClick='highlightText("timeText")'>
          </img>
          <input dojoType="dijit.form.TextBox"
                 id="timeText"
                 name="timeText"
                 style="width:20mm"
                 value="Key Time..."
                 onClick="highlightText('timeText');">
          </input>
          <span dojoType="dijit.ToolbarSeparator">
            &nbsp; &nbsp;
          </span>
          <button dojoType="dijit.form.Button"
                  id="submitButton"
                  label="Submit"
                  iconClass="dijitEditorIcon dijitEditorIconInsertTable"
                  onClick="refreshGrid();">
          </button>
          <span dojoType="dijit.ToolbarSeparator">
          </span>
          <button dojoType="dijit.form.Button"
                  id="clearButton"
                  label="Clear"
                  iconClass="dijitEditorIcon dijitEditorIconCancel"
                  onClick="clearToolbar();">
          </button>
        </div>
      </div>

Change History (2)

comment:1 Changed 9 years ago by bill

Component: GeneralDijit
Description: modified (diff)
Owner: anonymous deleted

Please attach a complete test case (a single HTML file) with instructions on how to reproduce the problem.

comment:2 Changed 9 years ago by bill

Resolution: invalid
Status: newclosed

Oh, you are talking about Toolbar? You shouldn't be setting tabIndex on the buttons inside of a toolbar. Navigation is done by left/right arrow keys, and everything related to tabIndex is handled by the Toolbar itself.

Also, your toolbar should not contain

<span>&nbsp;</span>

or

          <span dojoType="dojo.data.ItemFileReadStore" 
                jsId ="plantStore" 
                url="resources/json/plantStore.json">
          </span>

Toolbars contain buttons, selects, Toolbarseparator... widgets like that.

Note: See TracTickets for help on using tickets.