Combo Box Filter Functionality

[StephenRiosDev]

UX

1. Maintain all current select behaviors (like selecting a highlighted menu option on tab)
2. Won't Do: On blur, check if what the user typed matches a menu option exactly, and select it if so
   • Do we want to strip everything other than a-zA-Z0-9 and spaces before comparison?
   • Do we want to stick to a strict string comparison?
3. If no match and no selection, show custom validity error for this use case

Engineering Concerns

1. Property for combobox that enables enforcing valid values to menu options
   • Option 1: Property Name
     • restrictValueToOptions
     • enforceMenuOptions
     • menuOptionsOnly
   • Option 2: New property behavior
     • type: filter
     • type: suggestion
     • default: suggestion?
2. Update validation.js to include combobox and look for this property, set the custom validity state, etc.
   • Need a name for the custom validity state for enforced values
     • We should probably use "valueMissing"
     • setCustomValidityValueMissingFilter for message -> valueMissing for validity
     • We will decide whether to display valueMissing or valueMissingFilter validity messages based on state
     • Validity state needs to be one of the HTML standards at: https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/patternMismatch
3. For dynamic menus

• Menu options persist in the closed state, so we should be able to validate against them after a blur event
• We should check for the loading state on the menu before attempting to validate
  • This is needed to facilitate waiting on any pending API calls before attempting validation
  • We may need some kind of deferred validation as opposed to simply skipping validation if the menu is currently loading
  • always attempt to validate when the menu stops loading
    • Make sure there's no scrolling issues on validations that are greatly delayed

[StephenRiosDev]

#Decisions

Will Do

New property will be behavior

Default Value: "suggestion"
New Value: "filter"

Validation will be based on valueMissing

setCustomValidityValueMissing: Message for when the value is actually missing
setCustomValidityValueMissingFilter: Message for when filter behavior is enabled and no value was selected
validityState: Will be valueMissing when the user does not select a menu option when the filter behavior is enabled

Dynamic Menus will Defer Validation Until After Load

Reasoning: We always want to validate against valid options, so even if it takes 3 minutes for an API call to return, we want to validate the user's current input value against the valid options.

We should only validate against combobox.value and not combobox.value.input when deferring validation in this manner.

Won't Do

Any new auto-select features

Reasoning: We want to ensure that we are meeting consumer and user needs without getting in their way with features we assumed they wanted