feat(filter-field): Adding keyboard functionality to multiselect dropbox

[manulopez2dynatrace]

Pull Request

---

Type of PR

Feature (non-breaking change which adds functionality) Breaking change (fix or change that would cause existing functionality to not work as expected)

Checklist

• [x] I have read the CONTRIBUTING doc and I follow the PR guidelines
• [x] Lint and unit tests pass locally with my changes
• [x] I have added tests that prove my fix is effective or that my feature works
• [x] I have added necessary documentation (if appropriate)

Changes

User now is able to navigate from the filter bar to the multiselect options and the other way around, due to that, the auto focus is not working anymore (autoActiveFirstOption) as the focus is set via arrow key navigation.

Cases to consider:

Acceptance Criteria 1 HAVING the filter bar THEN selecting a multiselect filter AND start typing THEN no option should be focused by default THEN the user press the down arrow key AND the first option should be focused

Acceptance Criteria 2 HAVING the filter bar THEN selecting a multiselect filter AND start typing THEN no option should be focused by default THEN the user press the up arrow key THEN it scrolls down to the end of the list AND the last option must be focused

Acceptance Criteria 3 HAVING the first multiselect option focused THEN the user press the up arrow key AND the filter field should be focused AND no option in the list should be focused

Acceptance Criteria 4 HAVING the last multiselect option focused THEN the user press the down arrow key AND the filter field should be focused AND no option in the list should be focused

Note: Navigating through the options with the arrow keys should be still working as it is at this moment

[Sherif-Elhefnawy]

@manulopez2dynatrace, seems that the dropdown in case of Multi-select stays open on hitting Tab, which shouldn't be the case. Also, why is the autoFocus not working anymore on opening the dropdown?