Opened 15 years ago

Closed 15 years ago

Last modified 13 years ago

#364 closed defect (fixed)

tab working incorrect on combobox widget

Reported by: [email protected] Owned by: anonymous
Priority: high Milestone:
Component: Widgets Version: 0.2
Keywords: combobox Cc:
Blocked By: Blocking:


if one uses a combobox widget in a form, pressinf the tab to leave the combox, gives the dropdown focus, in sted off the next field in the form. also the dropdown stay's active, while it should disapear when a user tabs out.

an example:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
      Dojo ComboBox Widget Test
<SCRIPT type="text/javascript">var djConfig = {isDebug: true};</SCRIPT>
<SCRIPT type="text/javascript" src="/scripts/dojo.js"></SCRIPT>
<SCRIPT type="text/javascript"> dojo.require("dojo.widget.ComboBox");</SCRIPT>
    <FORM action="#">
      <INPUT size="" name='first'>
      <SELECT dojotype="combobox" name='second' size='30'>
        <OPTION value="foo">foo</OPTION>
        <OPTION value="bar">bar</OPTION>
        <OPTION value="baz">baz</OPTION>
        <OPTION value="thud">thud</OPTION>
      <INPUT type="text" size="10" name='thirth'><BR>
      <INPUT type="submit">

klik on the first field, and tab the combo, then enter someting, and press tab again to go the the next field. this gives some unwanted results.

with kinds regards Sander

PS, this is my first posting here, so if I did something wrong, don't hesitate to inform me!

Change History (8)

comment:1 Changed 15 years ago by [email protected]

This problem is easily fixed by attaching an additonal event to the combobox input. In HtmlComboBox?.html:

<input type="text" class="comboBoxInput"

dojoAttachEvent="keyDown: onKeyDown; keyUp: onKeyUp; blur: onBlur;" dojoAttachPoint="textInputNode" style="width: 100%;">

Note the "blur: onBlur;" addition

and in html/ComboBox.js: just above onKeyUp: function(evt){

onBlur: function(evt){

alert("in blur"); if(this._result_list_open){


evt = { target: this._highlighted_option }; this.selectOption(evt); evt = { target: this._highlighted_option }; this.selectOption(evt);


Otherwise select the option with out the event. this.hideResultList();


} return;


This addition will cause the widget to close the selection window if you hit tab and have no options hilighted and if you have selected an option (ie. its hilighted) it will close the selection box and enter that value into the combobox.

If this isnt the propper function of the widget, the behavior is easily modified by changing the onBlur function above.

Above comments submitted to mailling list as well for approval/committing if acceptable

comment:2 Changed 15 years ago by [email protected]

Ugh, I forgot to remove my debug line, in the above code just delete "alert("in blur");" from the code ;) My apologies.


comment:3 Changed 15 years ago by [email protected]

Karl, tanks for your solution, It works as it is supposed to do. the only thing that's naggig me, is that I have to change every HTML page that uses this control, just to get behaviour it should posess by default.

I hope someone has a solution for this.

regards Sander Elias

comment:4 Changed 15 years ago by [email protected]

why change every page? Do they not all use the same dojo src root? they shold all be using the same template unless you changed that specifically...

comment:5 Changed 15 years ago by [email protected]

Bill pointed out another test... and this fix does not cover typing say "te" in the test_combobox demo and then hitting tab (it will select "tennesee" but leave the box open again...

so... for the time being, this is still an issue, less of one, but still not 100% fix

comment:6 Changed 15 years ago by bill

Resolution: fixed
Status: newclosed

OK, I just checked in a slew of fixes from Johns Morris (rev 3066) that should fix this problem too.

comment:7 Changed 15 years ago by bill

Milestone: 0.3release

comment:8 Changed 13 years ago by (none)

Milestone: 0.3release

Milestone 0.3release deleted

Note: See TracTickets for help on using tickets.