| 65 | | <body> |
| 66 | | <h1>Dojo ComboBox Widget Test</h1> |
| 67 | | <p> |
| 68 | | A ComboBox is like a text <input> 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> |
| | 71 | <body class="tundra"> |
| | 72 | |
| | 73 | <h1 class="testTitle">Dojo ComboBox Widget Test</h1> |
| | 74 | <p> |
| | 75 | A ComboBox is like a text <input> field (ie, you can input any value you want), |
| | 76 | but it also has a list of suggested values that you can choose from. |
| | 77 | The drop down list is filtered by the data you have already typed in. |
| | 78 | </p> |
| | 79 | <form action="#" method="GET"> |
| | 80 | |
| | 81 | <p>ComboBox #1: inlined data, autoComplete=false, default value of Iowa, pageSize=30</p> |
| | 82 | <label for="setvaluetest">US State test 1</label> (200% Courier font): |
| | 83 | <select id="setvaluetest" |
| | 84 | name="state1" |
| | 85 | dojoType="dijit.form.ComboBox" |
| | 86 | class="medium" |
| | 87 | style="width:50%;font-size:200%;font-family:Courier;" |
| | 88 | name="foo.bar1" |
| | 89 | autoComplete="false" |
| | 90 | onChange="dojo.byId('oc1').value=arguments[0]" |
| | 91 | pageSize="30" |
| | 92 | > |
| | 93 | <option></option> |
| | 94 | <option>Alabama</option> |
| | 95 | <option>Alaska</option> |
| | 96 | <option>American Samoa</option> |
| | 97 | <option>Arizona</option> |
| | 98 | <option>Arkansas</option> |
| | 99 | <option>Armed Forces Europe</option> |
| | 100 | <option>Armed Forces Pacific</option> |
| | 101 | <option>Armed Forces the Americas</option> |
| | 102 | <option>California</option> |
| | 103 | <option>Colorado</option> |
| | 104 | <option>Connecticut</option> |
| | 105 | <option>Delaware</option> |
| | 106 | <option>District of Columbia</option> |
| | 107 | <option>Federated States of Micronesia</option> |
| | 108 | <option>Florida</option> |
| | 109 | <option>Georgia</option> |
| | 110 | <option>Guam</option> |
| | 111 | <option>Hawaii</option> |
| | 112 | <option>Idaho</option> |
| | 113 | <option>Illinois</option> |
| | 114 | <option>Indiana</option> |
| | 115 | <option selected>Iowa</option> |
| | 116 | <option>Kansas</option> |
| | 117 | <option>Kentucky</option> |
| | 118 | <option>Louisiana</option> |
| | 119 | <option>Maine</option> |
| | 120 | <option>Marshall Islands</option> |
| | 121 | <option>Maryland</option> |
| | 122 | <option>Massachusetts</option> |
| | 123 | <option>Michigan</option> |
| | 124 | <option>Minnesota</option> |
| | 125 | <option>Mississippi</option> |
| | 126 | <option>Missouri</option> |
| | 127 | <option>Montana</option> |
| | 128 | <option>Nebraska</option> |
| | 129 | <option>Nevada</option> |
| | 130 | <option>New Hampshire</option> |
| | 131 | <option>New Jersey</option> |
| | 132 | <option>New Mexico</option> |
| | 133 | <option>New York</option> |
| | 134 | <option>North Carolina</option> |
| | 135 | <option>North Dakota</option> |
| | 136 | <option>Northern Mariana Islands</option> |
| | 137 | <option>Ohio</option> |
| | 138 | <option>Oklahoma</option> |
| | 139 | <option>Oregon</option> |
| | 140 | <option>Pennsylvania</option> |
| | 141 | <option>Puerto Rico</option> |
| | 142 | <option>Rhode Island</option> |
| | 143 | <option>South Carolina</option> |
| | 144 | <option>South Dakota</option> |
| | 145 | <option>Tennessee</option> |
| | 146 | <option>Texas</option> |
| | 147 | <option>Utah</option> |
| | 148 | <option>Vermont</option> |
| | 149 | <option>Virgin Islands, U.S.</option> |
| | 150 | <option>Virginia</option> |
| | 151 | <option>Washington</option> |
| | 152 | <option>West Virginia</option> |
| | 153 | <option>Wisconsin</option> |
| | 154 | <option>Wyoming</option> |
| | 155 | </select> |
| | 156 | <br>onChange:<input id="oc1" disabled value="not fired yet!" autocomplete="off"> |
| | 157 | <input type="button" value="Set displayed value to Kentucky" onClick="dijit.byId('setvaluetest').setDisplayedValue('Kentucky')"> |
| | 158 | <input type="button" value="Set displayed value to Canada" onClick="dijit.byId('setvaluetest').setDisplayedValue('Canada')"> |
| | 159 | |
| | 160 | <hr> |
| | 161 | |
| | 162 | <div dojoType="dojo.data.ItemFileReadStore" jsId="stateStore" |
| | 163 | url="../_data/states.json"></div> |
| | 164 | |
| | 165 | <div dojoType="dojo.data.ItemFileReadStore" jsId="dijitStore" |
| | 166 | url="../_data/dijits.json"></div> |
| | 167 | |
| | 168 | <p>ComboBox #2: url, autoComplete=true:</p> |
| | 169 | <label for="datatest">US State test 2</label> (8pt font): |
| | 170 | <input dojoType="dijit.form.ComboBox" |
| | 171 | value="California" |
| | 172 | class="medium" |
| | 173 | store="stateStore" |
| | 174 | searchAttr="name" |
| | 175 | style="width: 200px; font-size: 8pt;" |
| | 176 | name="state2" |
| | 177 | onChange="setVal2" |
| | 178 | id="datatest" |
| | 179 | > |
| | 180 | <span>Value: <input id="value2" disabled value="California"></span> |
| | 181 | <hr> |
| | 182 | <label for="datatestDijit">Dijit List test #1</label> (150% font): |
| | 183 | <input dojoType="dijit.form.ComboBox" |
| | 184 | value="dijit.Editor" |
| | 185 | class="medium" |
| | 186 | store="dijitStore" |
| | 187 | searchAttr="className" |
| | 188 | style="width: 200px; font-size: 150%;" |
| | 189 | name="dijitList1" |
| | 190 | id="datatestDijit" |
| | 191 | > |
| | 192 | <span>Hey look, this one is kind of useful.</span> |
| | 193 | <hr> |
| | 194 | |
| | 195 | <p>ComboBox #3: initially disabled, url, autoComplete=false:</p> |
| | 196 | <label for="combo3">US State test 3: </label> |
| | 197 | <input id="combo3" |
| | 198 | dojoType="dijit.form.ComboBox" |
| | 199 | value="California" |
| | 200 | class="medium" |
| | 201 | store="stateStore" |
| | 202 | searchAttr="name" |
| | 203 | style="width: 300px;" |
| | 204 | name="state3" |
| | 205 | autoComplete="false" |
| | 206 | onChange="setVal3" |
| | 207 | disabled |
| | 208 | > |
| | 209 | <span>Value: <input id="value3" disabled></span> |
| | 210 | <div> |
| | 211 | <button id="but" onclick='toggleDisabled("but", "combo3"); return false;'>Enable</button> |
| | 212 | </div> |
| | 213 | <hr> |
| | 214 | <p>ComboBox #4: url, autoComplete=false required=true and highlightMatch="none"</p> |
| | 215 | <label for="combobox4">US State test 4: </label> |
| | 216 | <input dojoType="dijit.form.ComboBox" |
| | 217 | value="" |
| | 218 | class="medium" |
| | 219 | store="stateStore" |
| | 220 | searchAttr="name" |
| | 221 | style="width: 300px;" |
| | 222 | name="state4" |
| | 223 | onChange="setVal4" |
| | 224 | autoComplete="false" |
| | 225 | id="combobox4" |
| | 226 | required="true" |
| | 227 | highlightMatch="none" |
| | 228 | > |
| | 229 | <span>Value: <input id="value4" disabled></span> |
| | 230 | <hr> |
| | 231 | <p>A ComboBox with no arrow, and with highlightMatch="all", which highlights all matches (the server is not searching accordingly!)</p> |
| | 232 | <input dojoType="dijit.form.ComboBox" |
| | 233 | value="California" |
| | 234 | store="stateStore" |
| | 235 | searchAttr="name" |
| | 236 | name="state5" |
| | 237 | autoComplete="false" |
| | 238 | hasDownArrow="false" |
| | 239 | highlightMatch="all" |
| | 240 | > |
| | 241 | <hr> |
| | 242 | <p>A combo created by createWidget</p> |
| | 243 | <input id="progCombo"> |
| | 244 | <hr> |
| | 245 | <p>A ComboBox with an initial query. (Limits list to items with type = country.)</p> |
| | 246 | <input id="progCombo2"> |
| | 247 | <hr> |
| | 248 | <input type="button" value="Create one in a window" onclick="var win=window.open(window.location);"></input> |
| | 249 | <input type="submit"> |
| | 250 | |
| | 251 | </form> |
| | 252 | <p> |
| | 253 | This is some text below the ComboBoxes. It shouldn't get pushed out of the way when search results get returned. |
| | 254 | also: adding a simple combo box to test IE bleed through problem: |
| | 255 | </p> |
| | 256 | |
| | 257 | <select> |
| | 258 | <option>test for</option> |
| | 259 | <option>IE bleed through</option> |
| | 260 | <option>problem</option> |
| 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 and highlightMatch="none"</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 | | highlightMatch="none" |
| 221 | | > |
| 222 | | <span>Value: <input id="value4" disabled></span> |
| 223 | | <hr> |
| 224 | | <p>A ComboBox with no arrow, and with highlightMatch="all", which highlights all matches (the server is not searching accordingly!)</p> |
| 225 | | <input dojoType="dijit.form.ComboBox" |
| 226 | | value="California" |
| 227 | | store="stateStore" |
| 228 | | searchAttr="name" |
| 229 | | name="state5" |
| 230 | | autoComplete="false" |
| 231 | | hasDownArrow="false" |
| 232 | | highlightMatch="all" |
| 233 | | > |
| 234 | | <hr> |
| 235 | | <p>A combo created by createWidget</p> |
| 236 | | <input id="progCombo"> |
| 237 | | <hr> |
| 238 | | <p>A ComboBox with an initial query. (Limits list to items with type = country.)</p> |
| 239 | | <input id="progCombo2"> |
| 240 | | <hr> |
| 241 | | <input type="button" value="Create one in a window" onclick="var win=window.open(window.location);"></input> |
| 242 | | <input type="submit"> |
| 243 | | |
| 244 | | </form> |
| 245 | | <p> |
| 246 | | This is some text below the ComboBoxes. It shouldn't get pushed out of the way when search results get returned. |
| 247 | | also: adding a simple combo box to test IE bleed through problem: |
| 248 | | </p> |
| 249 | | |
| 250 | | <select> |
| 251 | | <option>test for</option> |
| 252 | | <option>IE bleed through</option> |
| 253 | | <option>problem</option> |
| 254 | | </select> |
| 255 | | <h3>Some tests:</h3> |
| 256 | | <ol> |
| 257 | | <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> |
| 258 | | <li>Type in DX - input box shows DX and no dropdown.</li> |
| 259 | | <li>Open dropdown, click an item, it selects and closes dropdown.</li> |
| 260 | | <li>Click triangle icon - dropdown shows. Click it again - dropdown goes.</li> |
| 261 | | <li>Check that you can type in more than required (e.g. alaba for alabama) and it still correctly shows alabama</li> |
| 262 | | <li>Tab into the combo works, list should not apear.</li> |
| 263 | | <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> |
| 264 | | <li>Do the dropdown and click outside of it - the dropdown disappears.</li> |
| 265 | | <li>Javascript disabled -> fallback to old style combo?</li> |
| 266 | | <li>Can you paste in the start of a match? [no]</li> |
| 267 | | <li>Backspace to start - dropdown shows all all items</li> |
| 268 | | <li>Backspace deselects last character [Borked: currently you have to backspace twice]</li> |
| 269 | | <li>Press down key to open dropdown</li> |
| 270 | | <li>Down and up keys select previous/next in dropdown.</li> |
| 271 | | <li>Non-alpha keys (F12, ctrl-c, whatever) should not affect dropdown.</li> |
| 272 | | <li>Press down arrow to highlight an item, pressing enter selects it and closes dropdown.</li> |
| 273 | | <li>Press down arrow to highlight an item, pressing space selects it and closes dropdown.</li> |
| 274 | | <li>Check that pressing escape undoes the previous action and closes the dropdown</li> |
| 275 | | <li>Check that pressing escape again clears the input box.</li> |
| 276 | | <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> |
| 277 | | <li>In IE, dropdown list does not go behind the second combo (special code to manage this).</li> |
| 278 | | <li>Check dropdown is aligned correctly with bottom of the text input</li> |
| 279 | | <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> |
| 280 | | <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> |
| 281 | | <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> |
| 282 | | <li>Check that dropdown is smooth [looks uggy on second keypress in FF - hides then shows]</li> |
| 283 | | <li>Clear the field. Type in A |