Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

USWDS-3479 Combo Box Subsequent Selection #3505

Conversation

wbyoko
Copy link
Contributor

@wbyoko wbyoko commented Jun 10, 2020

Current implementation in Federalist

Description

closes #3479

This updates the ux of selecting an item after an item has been selected.

New and Updated Test Cases

  • should emit change events when resetting input values when an incomplete item is submitted through enter
  • should not show the list when clicking a disabled toggle button
  • should show the list when clicking the input once the component has been enabled
  • should display the full list and focus the selected item when the input is pristine (after fresh selection)
  • should display the filtered list when the input is dirty (characters inputted)
  • should show a clear button when the input has a selected value present
  • should update the filter and begin filtering once a pristine input value is changed
  • should show the list by clicking the toggle button
  • should toggle the list and close by clicking when clicking the toggle button twice
  • should reset input values when an incomplete item is remaining on blur
  • should reset input values when an incomplete item is submitted through enter
  • should not allow enter to perform default action when the list is hidden
  • should close the list and reset input value when escape is performed while the list is open
  • should reset the input value when a complete selection is left on blur from the input element
  • should select the focused list item in the list when pressing tab on a focused item
  • should not select the focused list item in the list when blurring component from a focused item

Additional information - Screenshot images

Screenshot 2020-06-16 13 34 02
Screenshot 2020-06-16 13 34 07
Screenshot 2020-06-16 13 34 13
Screenshot 2020-06-16 13 34 22

Before you hit Submit, make sure you’ve done whichever of these applies to you:

  • Follow the 18F Front End Coding Style Guide and Accessibility Guide.
  • Run npm test and make sure the tests for the files you have changed have passed.
  • Run your code through HTML_CodeSniffer and make sure it’s error free.
  • Title your pull request using this format: [Website] - [UI component]: Brief statement describing what this pull request solves.

wbyoko added 22 commits June 1, 2020 17:31
* specs
* styles
* manage pristine selection state
…combobox-subsequent-selection

# Conflicts:
#	src/js/components/combo-box.js
toggle list
update tabindex
…-combobox-subsequent-selection

# Conflicts:
#	spec/unit/combo-box/combo-box-change-event.spec.js
#	spec/unit/combo-box/combo-box.spec.js
#	src/js/components/combo-box.js
…-combobox-subsequent-selection

# Conflicts:
#	spec/unit/combo-box/combo-box.spec.js
…combobox-subsequent-selection

# Conflicts:
#	spec/unit/combo-box/combo-box.spec.js
#	src/js/components/combo-box.js
* reset selection on tab
…ox-subsequent-selection

# Conflicts:
#	spec/unit/combo-box/combo-box.spec.js
needed for subsequent selection
fire events on clear
highlight selected item on open
make sure shift+tab does nothing
after adding new buttons for toggle and clear. we need new functions to support disable and enable.
remove hover/active styles
@wbyoko wbyoko marked this pull request as ready for review June 11, 2020 19:27
@thisisdano
Copy link
Member

This is a pretty extensive set of improvements! I have a couple questions related to this work, but I'm inclined to merge this now, and do any additional polish in a follow-up.

@thisisdano thisisdano merged commit 8d0e142 into 10x-forms/combo-box-updates Jun 16, 2020
@thisisdano thisisdano deleted the 10x-forms/3479-combobox-subsequent-selection branch June 16, 2020 19:50
This was referenced Jun 16, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants