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

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

Merged
merged 20 commits into from
Feb 11, 2019

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.

@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!

packages/react/src/components/Dropdown/Dropdown.tsx Outdated Show resolved Hide resolved
packages/react/src/components/Dropdown/Dropdown.tsx Outdated Show resolved Hide resolved
@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 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