Location: A review of cardiac cellular electrophysiology models @ 1b3862589abf / dojo-presentation / js / dojo / dijit / tests / form / test_ComboBox.html

Author:
David Nickerson <david.nickerson@gmail.com>
Date:
2021-09-17 15:50:49+12:00
Desc:
tweak html formatting
Permanent Source URI:
https://models.fieldml.org/workspace/a1/rawfile/1b3862589abf79ae9119ee0b5e99a8b785d762e1/dojo-presentation/js/dojo/dijit/tests/form/test_ComboBox.html
Compare... Download Source

Dojo ComboBox Widget Test

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.

ComboBox #1: inlined data, autoComplete=false, default value of Iowa, pageSize=30

US State test 1 (200% Courier font): Alabama Alaska American Samoa Arizona Arkansas Armed Forces Europe Armed Forces Pacific Armed Forces the Americas California Colorado Connecticut Delaware District of Columbia Federated States of Micronesia Florida Georgia Guam Hawaii Idaho Illinois Indiana Iowa Kansas Kentucky Louisiana Maine Marshall Islands Maryland Massachusetts Michigan Minnesota Mississippi Missouri Montana Nebraska Nevada New Hampshire New Jersey New Mexico New York North Carolina North Dakota Northern Mariana Islands Ohio Oklahoma Oregon Pennsylvania Puerto Rico Rhode Island South Carolina South Dakota Tennessee Texas Utah Vermont Virgin Islands, U.S. Virginia Washington West Virginia Wisconsin Wyoming
onChange:

ComboBox #2: url, autoComplete=true:

US State test 2 (8pt font): Value:
Dijit List test #1 (150% font): Hey look, this one is kind of useful.

ComboBox #3: initially disabled, url, autoComplete=false:

US State test 3: Value:
Enable

ComboBox #4: url, autoComplete=false required=true and highlightMatch="none"

US State test 4: Value:

A ComboBox with no arrow, which searches and highlights matches anywhere in the string

A combo created by createWidget

A ComboBox with an initial query. (Limits list to items with type = country.)

A ComboBox with an ItemFileReadStore and a descending sort. (Limits list to items with type = country.)

A ComboBox with a option tags, autoComplete=true, pageSize=30, and a descending sort.

Alabama Alaska American Samoa Arizona Arkansas Armed Forces Europe Armed Forces Pacific Armed Forces the Americas California Colorado Connecticut Delaware District of Columbia Federated States of Micronesia Florida Georgia Guam Hawaii Idaho Illinois Indiana Iowa Kansas Kentucky Louisiana Maine Marshall Islands Maryland Massachusetts Michigan Minnesota Mississippi Missouri Montana Nebraska Nevada New Hampshire New Jersey New Mexico New York North Carolina North Dakota Northern Mariana Islands Ohio Oklahoma Oregon Pennsylvania Puerto Rico Rhode Island South Carolina South Dakota Tennessee Texas Utah Vermont Virgin Islands, U.S. Virginia Washington West Virginia Wisconsin Wyoming

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:

test for IE bleed through problem

Some tests:

  1. Type in D - dropdown shows Delaware and District of columbia. [Would be nice if it bolded the D's in the dropdown list!]
  2. Type in DX - input box shows DX and no dropdown.
  3. Open dropdown, click an item, it selects and closes dropdown.
  4. Click triangle icon - dropdown shows. Click it again - dropdown goes.
  5. Check that you can type in more than required (e.g. alaba for alabama) and it still correctly shows alabama
  6. Tab into the combo works, list should not apear.
  7. Tab out of the combo works - closes dropdown and goes to next control (focus should not go to the dropdown because tabindex="-1").
  8. Do the dropdown and click outside of it - the dropdown disappears.
  9. Javascript disabled -> fallback to old style combo?
  10. Can you paste in the start of a match? [no]
  11. Backspace to start - dropdown shows all all items
  12. Backspace deselects last character [Borked: currently you have to backspace twice]
  13. Press down key to open dropdown
  14. Down and up keys select previous/next in dropdown.
  15. Non-alpha keys (F12, ctrl-c, whatever) should not affect dropdown.
  16. Press down arrow to highlight an item, pressing enter selects it and closes dropdown.
  17. Press down arrow to highlight an item, pressing space selects it and closes dropdown.
  18. Check that pressing escape undoes the previous action and closes the dropdown
  19. Check that pressing escape again clears the input box.
  20. 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)
  21. In IE, dropdown list does not go behind the second combo (special code to manage this).
  22. Check dropdown is aligned correctly with bottom of the text input
  23. 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)
  24. Try repeatably droppingdown and closing the dropdown. Shouldnt get hung [sometimes flicks closed just after opening due to timers, but not a biggie]
  25. 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)
  26. Check that dropdown is smooth [looks uggy on second keypress in FF - hides then shows]
  27. 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)
  28. Clear the field and enter an invalid entry and tab out e.g. Qualude. Does that make sense given the combobox setup options?
  29. (Add any other tests here)