Blame | Last modification | View Log | RSS feed
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html><head><title>Dojo ComboBox Widget Test</title><style>@import "../../../dojo/resources/dojo.css";@import "../css/dijitTests.css";</style><script type="text/javascript" src="../../../dojo/dojo.js"djConfig="isDebug: true, parseOnLoad: true"></script><script type="text/javascript" src="../_testCommon.js"></script><script type="text/javascript">dojo.require("dojo.data.ItemFileReadStore");dojo.require("dijit.form.ComboBox");dojo.require("dojo.parser"); // scan page for widgets and instantiate themfunction setVal1(val){dojo.byId('value1').value=val;}function setVal2(val){dojo.byId('value2').value=val;console.debug("Value changed to ["+val+"] in second ComboBox (#1652)");}function setVal3(val){dojo.byId('value3').value=val;}function setVal4(val){dojo.byId('value4').value=val;}var combo;function init(){var store = new dojo.data.ItemFileReadStore({url: '../_data/states.json'});combo = new dijit.form.ComboBox({name:"prog",autoComplete:false,store: store,searchAttr:"name"}, dojo.byId("progCombo"));var store2 = new dojo.data.ItemFileReadStore({url: '../../demos/i18n/data.json'});combo = new dijit.form.ComboBox({name:"prog2",autoComplete:false,store:store2,query:{type:'country'},searchAttr:"name"}, dojo.byId("progCombo2"));}dojo.addOnLoad(init);function toggleDisabled(button, widget){widget = dijit.byId(widget);button = dojo.byId(button);widget.setDisabled(!widget.disabled);button.innerHTML= widget.disabled ? "Enable" : "Disable";}</script></head><body><h1>Dojo ComboBox Widget Test</h1><p>A ComboBox is like a text <input> field (ie, you can input any value you want),but it also has a list of suggested values that you can choose from.The drop down list is filtered by the data you have already typed in.</p><form action="#" method="GET"><p>ComboBox #1: inlined data, autoComplete=false, default value of Iowa, pageSize=30</p><label for="setvaluetest">US State test 1: </label><select id="setvaluetest"name="state1"dojoType="dijit.form.ComboBox"class="medium"style="width:50%;font-size:15pt;"name="foo.bar1"autoComplete="false"onChange="dojo.byId('oc1').value=arguments[0]"pageSize="30"><option></option><option>Alabama</option><option>Alaska</option><option>American Samoa</option><option>Arizona</option><option>Arkansas</option><option>Armed Forces Europe</option><option>Armed Forces Pacific</option><option>Armed Forces the Americas</option><option>California</option><option>Colorado</option><option>Connecticut</option><option>Delaware</option><option>District of Columbia</option><option>Federated States of Micronesia</option><option>Florida</option><option>Georgia</option><option>Guam</option><option>Hawaii</option><option>Idaho</option><option>Illinois</option><option>Indiana</option><option selected>Iowa</option><option>Kansas</option><option>Kentucky</option><option>Louisiana</option><option>Maine</option><option>Marshall Islands</option><option>Maryland</option><option>Massachusetts</option><option>Michigan</option><option>Minnesota</option><option>Mississippi</option><option>Missouri</option><option>Montana</option><option>Nebraska</option><option>Nevada</option><option>New Hampshire</option><option>New Jersey</option><option>New Mexico</option><option>New York</option><option>North Carolina</option><option>North Dakota</option><option>Northern Mariana Islands</option><option>Ohio</option><option>Oklahoma</option><option>Oregon</option><option>Pennsylvania</option><option>Puerto Rico</option><option>Rhode Island</option><option>South Carolina</option><option>South Dakota</option><option>Tennessee</option><option>Texas</option><option>Utah</option><option>Vermont</option><option>Virgin Islands, U.S.</option><option>Virginia</option><option>Washington</option><option>West Virginia</option><option>Wisconsin</option><option>Wyoming</option></select>onChange:<input id="oc1" disabled value="not fired yet!" autocomplete="off"><hr><div dojoType="dojo.data.ItemFileReadStore" jsId="stateStore"url="../_data/states.json"></div><div dojoType="dojo.data.ItemFileReadStore" jsId="dijitStore"url="../_data/dijits.json"></div><p>ComboBox #2: url, autoComplete=true:</p><label for="datatest">US State test 2: </label><input dojoType="dijit.form.ComboBox"value="California"class="medium"store="stateStore"searchAttr="name"style="width: 300px;"name="state2"onChange="setVal2"id="datatest"><span>Value: <input id="value2" disabled value="California"></span><hr><label for="datatest">Dijit List test #1: </label><input dojoType="dijit.form.ComboBox"value="dijit.Editor"class="medium"store="dijitStore"searchAttr="className"style="width: 300px;"name="dijitList1"id="datatestDijit"><span>Hey look, this one is kind of useful.</span><hr><p>ComboBox #3: initially disabled, url, autoComplete=false:</p><label for="combo3">US State test 3: </label><input id="combo3"dojoType="dijit.form.ComboBox"value="California"class="medium"store="stateStore"searchAttr="name"style="width: 300px;"name="state3"autoComplete="false"onChange="setVal3"disabled><span>Value: <input id="value3" disabled></span><div><button id="but" onclick='toggleDisabled("but", "combo3"); return false;'>Enable</button></div><hr><p>ComboBox #4: url, autoComplete=false required=true:</p><label for="combobox4">US State test 4: </label><input dojoType="dijit.form.ComboBox"value=""class="medium"store="stateStore"searchAttr="name"style="width: 300px;"name="state4"onChange="setVal4"autoComplete="false"id="combobox4"required="true"><span>Value: <input id="value4" disabled></span><hr><p>A ComboBox with no arrow</p><input dojoType="dijit.form.ComboBox"value="California"store="stateStore"searchAttr="name"name="state5"autoComplete="false"hasDownArrow="false"><hr><p>A combo created by createWidget</p><input id="progCombo"><hr><p>A ComboBox with an initial query. (Limits list to items with type = country.)</p><input id="progCombo2"><hr><input type="button" value="Create one in a window" onclick="var win=window.open(window.location);"></input><input type="submit"></form><p>This is some text below the ComboBoxes. It shouldn't get pushed out of the way when search results get returned.also: adding a simple combo box to test IE bleed through problem:</p><select><option>test for</option><option>IE bleed through</option><option>problem</option></select><h3>Some tests:</h3><ol><li>Type in D - dropdown shows Delaware and District of columbia. [Would be nice if it bolded the D's in the dropdown list!]</li><li>Type in DX - input box shows DX and no dropdown.</li><li>Open dropdown, click an item, it selects and closes dropdown.</li><li>Click triangle icon - dropdown shows. Click it again - dropdown goes.</li><li>Check that you can type in more than required (e.g. alaba for alabama) and it still correctly shows alabama</li><li>Tab into the combo works, list should not apear.</li><li>Tab out of the combo works - closes dropdown and goes to next control (focus should not go to the dropdown because tabindex="-1").</li><li>Do the dropdown and click outside of it - the dropdown disappears.</li><li>Javascript disabled -> fallback to old style combo?</li><li>Can you paste in the start of a match? [no]</li><li>Backspace to start - dropdown shows all all items</li><li>Backspace deselects last character [Borked: currently you have to backspace twice]</li><li>Press down key to open dropdown</li><li>Down and up keys select previous/next in dropdown.</li><li>Non-alpha keys (F12, ctrl-c, whatever) should not affect dropdown.</li><li>Press down arrow to highlight an item, pressing enter selects it and closes dropdown.</li><li>Press down arrow to highlight an item, pressing space selects it and closes dropdown.</li><li>Check that pressing escape undoes the previous action and closes the dropdown</li><li>Check that pressing escape again clears the input box.</li><li>In IE, mouse scroll wheel scrolls through the list. Scrolls by 1 item per click even if user has set mouse to scroll more than 1 in mouse settings. Only scrolls if text input has focus (page scrolling works as normal otherwise)</li><li>In IE, dropdown list does not go behind the second combo (special code to manage this).</li><li>Check dropdown is aligned correctly with bottom of the text input</li><li>Probably should try the combo in a relative div or absolute div and see where the dropdown ends up. (Strongly suspect problems in this area in IE - boo)</li><li>Try repeatably droppingdown and closing the dropdown. Shouldnt get hung [sometimes flicks closed just after opening due to timers, but not a biggie]</li><li>Check that default selection of the text makes sense. e.g. text is selected after picking an item, on tabbing in to text input etc)</li><li>Check that dropdown is smooth [looks uggy on second keypress in FF - hides then shows]</li><li>Clear the field. Type in A and then tab *very quickly* and see if the results make sense (the dropdown is on a timer - searchTimer)</li><li>Clear the field and enter an invalid entry and tab out e.g. Qualude. Does that make sense given the combobox setup options?</li><li>(Add any other tests here)</li></ol><div id="debugbox"></div><!-- maintain state of combo box if user presses back/forward button --><form name="_dojo_form" style="display:none" disabled="true"><textarea name="stabile" cols="80" rows="10"></textarea></form></body></html>