Custom-Selectbox icon indicating copy to clipboard operation
Custom-Selectbox copied to clipboard

Keyboard selection behavior and bugfixes.

Open cstickel opened this issue 14 years ago • 2 comments

Change event should not be fired on init or if value hasn't changed. Additionally the change event should only be fired at the end of a change (when dropdown gets closed). This behavior differed from normal select boxes. Selection by keyboard had a lot of bugs and didn't behave like native browser checkboxes. New behavior is:

  • Open dropdown with "Return" and "Space" key. (Was "Space", "Up" and "Down".)
  • Change value to selected option in dropdown with "Return", "Space", "Tab" and "ESC". (Was buggy => it didn't work at all.)
  • "Up" and "Down" with closed dropdown directly change value to next/prev item. (Opened dropdown.)
  • "Up" and "Down" with opened dropdown select next/prev item in dropdown. Dropdown doesn't close, select value changes, change event doesn't fire. (Fixed change event behavior.)
  • "Left" and "Right" keys are used as aliases for "Up" and "Down" (New feature.)
  • Alphanumeric keys with opened dropdown search for matchString and select the first matching item. Dropdown doesn't close, select value changes, change event doesn't fire. (Closed the dropdown. Fixed change event behavior.)
  • "Page Up" and "Page Down" key behavior added. Dropdown doesn't close, select value changes, change event doesn't fire. (New feature.)
  • Alphanumeric keys with closed dropdown search for matchString and directly change value to the first match. (Was the same. But bugged with appendTo Setting. => Just bugfixed.)
  • Multiple times the same alphanumeric key, starting with an empty matchString, cycle through the items starting with the matching char. (Stuck at the first item starting with the character.)
  • All non alphanumeric keys reset matchString. (Didn't reset matchString.)
  • Added support for dropdowns with vertical scrollbar.

See commit messages for complete list of bugfixes.

Tested with latest Chrome and Firefox.

cstickel avatar Feb 08 '12 17:02 cstickel

sorry for this huge pull request, i'll add some comments to the diff to make it more simple to understand. i tried to copy native select box behavior as good as possible. known differences are:

  • if you click on a select, while the dropdown of another select is open, the new dropdown opens and the clicked select gets focus. native selects just close the opened dropdown and keep focus on the old select. (unsure whats the best way to fix that, so far)
  • all other events than "change" on the replaced select don't fire at all. (todo: check which events make sense and trigger them)

as soon as the pull request is merged i'll add this two points to the issue tracker.

cstickel avatar Feb 11 '12 14:02 cstickel

any progress on this? There seems to be some good stuff here.

kenliu avatar Feb 13 '13 16:02 kenliu