CODEWITHSUNDEEP
dojodijit.form
bajji
bajji

Reputation: 1291

dijit filteringselect focus

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.

Upvotes: 1

Views: 460

Answers (2)

bajji
bajji

Reputation: 1291

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();

        });


    });

Upvotes: 1

GoinOff
GoinOff

Reputation: 1802

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.

Upvotes: 0

Related Questions