dijit filteringselect focus - dojo

Question

I have multiple FilteringSlect on my page except first one, rest are disabled. Upon selecting a value in first, 2nd filteringselect gets enabled and so on. I'm able to achieve this. When a user selects value in the first filteringselect and then press tab to go to the next fitleringselect, it gets enabled but user has to click the mouse on 2nd fitleringselect to enter a value. I have a jsfiddle link
`http://jsfiddle.net/qpue91L9/75/`
which demonstrates the problem. What I want is, as soon as user tabs from first filteringselect, next one should get enabled and without an extra click, user should be able to select a new value by typing inside the fitleringselect textbox.

Answer 1

I think I got it working [Working fiddle][1]
[1]: http://jsfiddle.net/qpue91L9/125/
Also as suggested, providing the complete working code
HTML Code
<input id="stateSelect">
<input id="stateSelect1">
<input id="stateSelect2">
JS Code
require([
"dojo/store/Memory", "dojo/on","dijit/form/FilteringSelect", "dojo/domReady!",'dijit/registry',"dijit/focus","dojo/dom"
], function(Memory, on,FilteringSelect,ready,registry,focusUtil,dom){
var stateStore = new Memory({
data: [
{name:"Alabama", id:"AL", timeStamp:"1211753600"},
{name:"Alaska", id:"AK", timeStamp:"1211753601"},
{name:"American Samoa", id:"AS", timeStamp:"1211753602"},
{name:"Arizona", id:"AZ", timeStamp:"1211753603"},
{name:"Arkansas", id:"AR", timeStamp:"1211753604"},
{name:"Armed Forces Europe", id:"AE", timeStamp:"1211753605"},
{name:"Armed Forces Pacific", id:"AP", timeStamp:"1211753606"},
{name:"Armed Forces the Americas", id:"AA", timeStamp:"1211753607"},
{name:"California", id:"CA", timeStamp:"1211753608"},
{name:"Colorado", id:"CO", timeStamp:"1211753609"},
{name:"Connecticut", id:"CT", timeStamp:"1211753610"},
{name:"Delaware", id:"DE", timeStamp:"1211753611"}
], idProperty: "timeStamp"
});
var filteringSelect = new FilteringSelect({
id: "stateSelect",
store: stateStore,
tabIndex: 1,
searchAttr: "name",
identifier: "timeStamp",
}, "stateSelect").startup();
var filteringSelect1 = new FilteringSelect({
id: "stateSelect1",
name: "state",
tabIndex: 2,
store: stateStore,
searchAttr: "name",
identifier: "timeStamp" ,
disabled:true,
}, "stateSelect1").startup();
var filteringSelect2 = new FilteringSelect({
id: "stateSelect2",
name: "state",
tabIndex: 3,
store: stateStore,
searchAttr: "name",
identifier: "timeStamp",
disabled:true,
}, "stateSelect2").startup();
on(dijit.byId("stateSelect"),"KeyPress",function(evt){
dijit.byId("stateSelect1").set("disabled",false);
});
on(dijit.byId("stateSelect"),"change",function(evt){
dijit.byId("stateSelect1").set("disabled",false);
dijit.byId("stateSelect1").focus();
});
on(dijit.byId("stateSelect1"),"KeyPress",function(evt){
dijit.byId("stateSelect2").set("disabled",false);
});
on(dijit.byId("stateSelect1"),"change",function(evt){
dijit.byId("stateSelect2").set("disabled",false);
dijit.byId("stateSelect2").focus();
});
});

Answer 2

I checked out your example and got it working somewhat....
Update Example
Basically, I added this:
require([ "dijit/focus", "dojo/dom", "dojo/domReady!" ], function(focusUtil, dom){
var domObj = dom.byId("stateSelect1");
focusUtil.focus(domObj);
});
and also added tabIndex property to each select object. The problem is it only works when you actually select an item from the list by clicking on it. If tab is used then it doesn't work. You could probably use this example and trap the tab event to make it work the way you want it too.