diff options
Diffstat (limited to 'includes/js/dijit/tests/form/test_ComboBox.html')
| -rw-r--r-- | includes/js/dijit/tests/form/test_ComboBox.html | 289 |
1 files changed, 289 insertions, 0 deletions
diff --git a/includes/js/dijit/tests/form/test_ComboBox.html b/includes/js/dijit/tests/form/test_ComboBox.html new file mode 100644 index 0000000..895a968 --- /dev/null +++ b/includes/js/dijit/tests/form/test_ComboBox.html @@ -0,0 +1,289 @@ +<!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"; + .dj_ie INPUT#setvaluetest { font-family: Courier; } /* help IE with font inheritance + </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 them + + function 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.setAttribute('disabled',!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> (200% Courier font): + <select id="setvaluetest" + name="state1" + dojoType="dijit.form.ComboBox" + class="medium" + style="width:50%;font-size:200%;font-family:Courier;" + 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> + <br>onChange:<input id="oc1" disabled value="not fired yet!" autocomplete="off"> + <input type="button" value="Set displayed value to Kentucky" onClick="dijit.byId('setvaluetest').setDisplayedValue('Kentucky')"> + <input type="button" value="Set displayed value to Canada" onClick="dijit.byId('setvaluetest').setDisplayedValue('Canada')"> + + <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> (8pt font): + <input dojoType="dijit.form.ComboBox" + value="California" + class="medium" + store="stateStore" + searchAttr="name" + style="width: 200px; font-size: 8pt;" + name="state2" + onChange="setVal2" + id="datatest" + > + <span>Value: <input id="value2" disabled value="California"></span> + <hr> + <label for="datatestDijit">Dijit List test #1</label> (150% font): + <input dojoType="dijit.form.ComboBox" + value="dijit.Editor" + class="medium" + store="dijitStore" + searchAttr="className" + style="width: 200px; font-size: 150%;" + 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> |