Skip to content
This repository was archived by the owner on Mar 4, 2020. It is now read-only.

feat(Dropdown): arrow navigation between selected items#842

Merged
silviuaavram merged 20 commits intomasterfrom
feat/dropdown-arrow-navigation
Feb 11, 2019
Merged

feat(Dropdown): arrow navigation between selected items#842
silviuaavram merged 20 commits intomasterfrom
feat/dropdown-arrow-navigation

Conversation

@silviuaavram
Copy link
Collaborator

Allows the navigation between Dropdown selected items using the Arrow Left and Arrow Right keys. Dropdown must be a multiple selection.

Removed the tabIndex=0 from Label as it was not needed for click. @mnajdova please confirm. As a result, 'X' icons are no longer in the tab order, they can only be clicked in order to remove the item. Focus is returned to the search input at removal.

Selected items are focusable now, but are not part of the normal tab order. Can be focused by click or by left/right arrow keys.

  • Left Arrow from search input should focus last selected item.
  • Right Arrow from last selected item should focus input.
  • Left/Right Arrows should switch focus between the items, depending on the currently focused one.
  • Delete/Backspace while focus is on a selected item should remove that item and put focus on the search input.

Added a style similar to Teams to the focused item (background colour change).

May need to rename activeIndex as I used it for consistency with Accordion/Menu but it may be a bit confusing, accepting feedback.

Adding screener test to check highlighted style on both keydown and click.

@silviuaavram silviuaavram force-pushed the feat/dropdown-arrow-navigation branch from acf7231 to d0c8d65 Compare February 6, 2019 11:17
@codecov
Copy link

codecov bot commented Feb 6, 2019

Codecov Report

Merging #842 into master will not change coverage.
The diff coverage is n/a.

Impacted file tree graph

@@           Coverage Diff           @@
##           master     #842   +/-   ##
=======================================
  Coverage   92.99%   92.99%           
=======================================
  Files          21       21           
  Lines         728      728           
  Branches       73       73           
=======================================
  Hits          677      677           
  Misses         51       51

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 4b28f23...892e60a. Read the comment docs.

Copy link
Collaborator

@bmdalex bmdalex left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@silviuavram - generally looks good, one thing: as we discussed, we'd like have the key nav extracted in the behaviors, can you create an issue or if it already exists reference it in this PR? Thanks!

@silviuaavram silviuaavram force-pushed the feat/dropdown-arrow-navigation branch 2 times, most recently from 67f6473 to 04005d3 Compare February 7, 2019 09:22
@silviuaavram silviuaavram force-pushed the feat/dropdown-arrow-navigation branch from 07622b3 to b0a78d8 Compare February 8, 2019 10:16
@silviuaavram silviuaavram force-pushed the feat/dropdown-arrow-navigation branch from d639b66 to 887d940 Compare February 8, 2019 12:54
@silviuaavram silviuaavram merged commit fc8276f into master Feb 11, 2019
@layershifter layershifter deleted the feat/dropdown-arrow-navigation branch February 11, 2019 10:12
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants