git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dijit/tests/form/test_ComboBox.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   2                 "http://www.w3.org/TR/html4/strict.dtd">
   3 <html>
   4 <head>
   5         <title>Dojo ComboBox Widget Test</title>
   6
   7         <style>
   8                 @import "../../../dojo/resources/dojo.css";
   9                 @import "../css/dijitTests.css";
  10                 .dj_ie INPUT#setvaluetest { font-family: Courier; } /* help IE with font inheritance
  11         </style>
  12
  13         <script type="text/javascript" src="../../../dojo/dojo.js"
  14                 djConfig="isDebug: true, parseOnLoad: true"></script>
  15         <script type="text/javascript" src="../_testCommon.js"></script>
  16
  17         <script type="text/javascript">
  18                 dojo.require("dojo.data.ItemFileReadStore");
  19                 dojo.require("dijit.form.ComboBox");
  20                 dojo.require("dojo.parser");    // scan page for widgets and instantiate them
  21
  22                 function setVal1(val){
  23                         dojo.byId('value1').value=val;
  24                 }
  25                 function setVal2(val){
  26                         dojo.byId('value2').value=val;
  27                         console.debug("Value changed to ["+val+"] in second ComboBox (#1652)");
  28                 }
  29                 function setVal3(val){
  30                         dojo.byId('value3').value=val;
  31                 }
  32                 function setVal4(val){
  33                         dojo.byId('value4').value=val;
  34                 }
  35                 var combo;
  36                 function init(){
  37                         var store = new dojo.data.ItemFileReadStore({url: '../_data/states.json'});
  38                         combo = new dijit.form.ComboBox({
  39                                 name:"prog",
  40                                 autoComplete:false,
  41                                 store: store,
  42                                 searchAttr:"name"
  43                         }, dojo.byId("progCombo"));
  44
  45                         var store2 = new dojo.data.ItemFileReadStore({url: '../../demos/i18n/data.json'});
  46                         combo = new dijit.form.ComboBox({
  47                                 name:"prog2",
  48                                 autoComplete:false,
  49                                 store:store2,
  50                                 query:{type:'country'},
  51                                 searchAttr:"name"
  52                         }, dojo.byId("progCombo2"));
  53                 }
  54                 dojo.addOnLoad(init);
  55
  56                 function toggleDisabled(button, widget){
  57                         widget = dijit.byId(widget);
  58                         button = dojo.byId(button);
  59                         widget.setAttribute('disabled',!widget.disabled);
  60                         button.innerHTML= widget.disabled ? "Enable" : "Disable";
  61                 }
  62         </script>
  63 </head>
  64
  65 <body>
  66 <h1>Dojo ComboBox Widget Test</h1>
  67 <p>
  68 A ComboBox is like a text &lt;input&gt; field (ie, you can input any value you want),
  69 but it also has a list of suggested values that you can choose from.
  70 The drop down list is filtered by the data you have already typed in.
  71 </p>
  72 <form action="#" method="GET">
  73
  74         <p>ComboBox #1: inlined data, autoComplete=false, default value of Iowa, pageSize=30</p>
  75         <label for="setvaluetest">US State test 1</label> (200% Courier font):
  76         <select id="setvaluetest"
  77                         name="state1"
  78                         dojoType="dijit.form.ComboBox"
  79                         class="medium"
  80                         style="width:50%;font-size:200%;font-family:Courier;"
  81                         name="foo.bar1"
  82                         autoComplete="false"
  83                         onChange="dojo.byId('oc1').value=arguments[0]"
  84                         pageSize="30"
  85         >
  86                 <option></option>
  87                 <option>Alabama</option>
  88                 <option>Alaska</option>
  89                 <option>American Samoa</option>
  90                 <option>Arizona</option>
  91                 <option>Arkansas</option>
  92                 <option>Armed Forces Europe</option>
  93                 <option>Armed Forces Pacific</option>
  94                 <option>Armed Forces the Americas</option>
  95                 <option>California</option>
  96                 <option>Colorado</option>
  97                 <option>Connecticut</option>
  98                 <option>Delaware</option>
  99                 <option>District of Columbia</option>
 100                 <option>Federated States of Micronesia</option>
 101                 <option>Florida</option>
 102                 <option>Georgia</option>
 103                 <option>Guam</option>
 104                 <option>Hawaii</option>
 105                 <option>Idaho</option>
 106                 <option>Illinois</option>
 107                 <option>Indiana</option>
 108                 <option selected>Iowa</option>
 109                 <option>Kansas</option>
 110                 <option>Kentucky</option>
 111                 <option>Louisiana</option>
 112                 <option>Maine</option>
 113                 <option>Marshall Islands</option>
 114                 <option>Maryland</option>
 115                 <option>Massachusetts</option>
 116                 <option>Michigan</option>
 117                 <option>Minnesota</option>
 118                 <option>Mississippi</option>
 119                 <option>Missouri</option>
 120                 <option>Montana</option>
 121                 <option>Nebraska</option>
 122                 <option>Nevada</option>
 123                 <option>New Hampshire</option>
 124                 <option>New Jersey</option>
 125                 <option>New Mexico</option>
 126                 <option>New York</option>
 127                 <option>North Carolina</option>
 128                 <option>North Dakota</option>
 129                 <option>Northern Mariana Islands</option>
 130                 <option>Ohio</option>
 131                 <option>Oklahoma</option>
 132                 <option>Oregon</option>
 133                 <option>Pennsylvania</option>
 134                 <option>Puerto Rico</option>
 135                 <option>Rhode Island</option>
 136                 <option>South Carolina</option>
 137                 <option>South Dakota</option>
 138                 <option>Tennessee</option>
 139                 <option>Texas</option>
 140                 <option>Utah</option>
 141                 <option>Vermont</option>
 142                 <option>Virgin Islands, U.S.</option>
 143                 <option>Virginia</option>
 144                 <option>Washington</option>
 145                 <option>West Virginia</option>
 146                 <option>Wisconsin</option>
 147                 <option>Wyoming</option>
 148         </select>
 149         <br>onChange:<input id="oc1" disabled value="not fired yet!" autocomplete="off">
 150         <input type="button" value="Set displayed value to Kentucky" onClick="dijit.byId('setvaluetest').setDisplayedValue('Kentucky')">
 151         <input type="button" value="Set displayed value to Canada" onClick="dijit.byId('setvaluetest').setDisplayedValue('Canada')">
 152
 153         <hr>
 154
 155         <div dojoType="dojo.data.ItemFileReadStore" jsId="stateStore"
 156                 url="../_data/states.json"></div>
 157
 158         <div dojoType="dojo.data.ItemFileReadStore" jsId="dijitStore"
 159                 url="../_data/dijits.json"></div>
 160
 161         <p>ComboBox #2: url, autoComplete=true:</p>
 162         <label for="datatest">US State test 2</label> (8pt font):
 163         <input dojoType="dijit.form.ComboBox"
 164                         value="California"
 165                         class="medium"
 166                         store="stateStore"
 167                         searchAttr="name"
 168                         style="width: 200px; font-size: 8pt;"
 169                         name="state2"
 170                         onChange="setVal2"
 171                         id="datatest"
 172         >
 173         <span>Value: <input id="value2" disabled value="California"></span>
 174         <hr>
 175         <label for="datatestDijit">Dijit List test #1</label> (150% font):
 176         <input dojoType="dijit.form.ComboBox"
 177                         value="dijit.Editor"
 178                         class="medium"
 179                         store="dijitStore"
 180                         searchAttr="className"
 181                         style="width: 200px; font-size: 150%;"
 182                         name="dijitList1"
 183                         id="datatestDijit"
 184         >
 185         <span>Hey look, this one is kind of useful.</span>
 186         <hr>
 187
 188         <p>ComboBox #3: initially disabled, url, autoComplete=false:</p>
 189         <label for="combo3">US State test 3: </label>
 190         <input id="combo3"
 191                         dojoType="dijit.form.ComboBox"
 192                         value="California"
 193                         class="medium"
 194                         store="stateStore"
 195                         searchAttr="name"
 196                         style="width: 300px;"
 197                         name="state3"
 198                         autoComplete="false"
 199                         onChange="setVal3"
 200                         disabled
 201         >
 202         <span>Value: <input id="value3" disabled></span>
 203         <div>
 204                 <button id="but" onclick='toggleDisabled("but", "combo3"); return false;'>Enable</button>
 205         </div>
 206         <hr>
 207         <p>ComboBox #4: url, autoComplete=false required=true:</p>
 208         <label for="combobox4">US State test 4: </label>
 209         <input dojoType="dijit.form.ComboBox"
 210                         value=""
 211                         class="medium"
 212                         store="stateStore"
 213                         searchAttr="name"
 214                         style="width: 300px;"
 215                         name="state4"
 216                         onChange="setVal4"
 217                         autoComplete="false"
 218                         id="combobox4"
 219                         required="true"
 220         >
 221         <span>Value: <input id="value4" disabled></span>
 222         <hr>
 223         <p>A ComboBox with no arrow</p>
 224         <input dojoType="dijit.form.ComboBox"
 225                         value="California"
 226                         store="stateStore"
 227                         searchAttr="name"
 228                         name="state5"
 229                         autoComplete="false"
 230                         hasDownArrow="false"
 231         >
 232         <hr>
 233         <p>A combo created by createWidget</p>
 234         <input id="progCombo">
 235         <hr>
 236         <p>A ComboBox with an initial query.  (Limits list to items with type = country.)</p>
 237         <input id="progCombo2">
 238         <hr>
 239         <input type="button" value="Create one in a window" onclick="var win=window.open(window.location);"></input>
 240         <input type="submit">
 241
 242 </form>
 243 <p>
 244 This is some text below the ComboBoxes. It shouldn't get pushed out of the way when search results get returned.
 245 also: adding a simple combo box to test IE bleed through problem:
 246 </p>
 247
 248 <select>
 249   <option>test for</option>
 250   <option>IE bleed through</option>
 251   <option>problem</option>
 252 </select>
 253 <h3>Some tests:</h3>
 254 <ol>
 255 <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>
 256 <li>Type in DX - input box shows DX and no dropdown.</li>
 257 <li>Open dropdown, click an item, it selects and closes dropdown.</li>
 258 <li>Click triangle icon - dropdown shows. Click it again - dropdown goes.</li>
 259 <li>Check that you can type in more than required (e.g. alaba for alabama) and it still correctly shows alabama</li>
 260 <li>Tab into the combo works, list should not apear.</li>
 261 <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>
 262 <li>Do the dropdown and click outside of it - the dropdown disappears.</li>
 263 <li>Javascript disabled -&gt; fallback to old style combo?</li>
 264 <li>Can you paste in the start of a match? [no]</li>
 265 <li>Backspace to start - dropdown shows all all items</li>
 266 <li>Backspace deselects last character [Borked: currently you have to backspace twice]</li>
 267 <li>Press down key to open dropdown</li>
 268 <li>Down and up keys select previous/next in dropdown.</li>
 269 <li>Non-alpha keys (F12, ctrl-c, whatever) should not affect dropdown.</li>
 270 <li>Press down arrow to highlight an item, pressing enter selects it and closes dropdown.</li>
 271 <li>Press down arrow to highlight an item, pressing space selects it and closes dropdown.</li>
 272 <li>Check that pressing escape undoes the previous action and closes the dropdown</li>
 273 <li>Check that pressing escape again clears the input box.</li>
 274 <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>
 275 <li>In IE, dropdown list does not go behind the second combo (special code to manage this).</li>
 276 <li>Check dropdown is aligned correctly with bottom of the text input</li>
 277 <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>
 278 <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>
 279 <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>
 280 <li>Check that dropdown is smooth [looks uggy on second keypress in FF - hides then shows]</li>
 281 <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>
 282 <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>
 283 <li>(Add any other tests here)</li>
 284 </ol>
 285 <div id="debugbox"></div>
 286 <!-- maintain state of combo box if user presses back/forward button -->
 287 <form name="_dojo_form" style="display:none" disabled="true"><textarea name="stabile" cols="80" rows="10"></textarea></form>
 288 </body>
 289 </html>