This commit:

• Renames "SearchSelect.ts" to "ak-search-select.ts", the better to reflect that it is a web component.
• Moves it into an independent folder named "SearchSelect" so that all existing folders that use it don't need any renaming or manipulation.
• Refactors SearchSelect.ts in the following ways:
  • Re-arranges the properties declaration so the seven properties actually used by callers are at the top; comments and documents every property.
  • Separates out the renderItem and renderEmptyItem HTML blocks into their own templates.
  • Separates renderItem further into renderItemWithDescription and RenderItemWithoutDescription; prior to this, there were multiple conditionals handling the description issue
  • Separates renderItems into renderItemsAsGroups and renderItems; this documents what each function does and removes multiple conditionals
  • Isolates the groupedItems() logic into a single method, moving the how away from the what.
  • Replaces the manual styling of renderMenu() into a lit-element styleMap(). This makes the actual render a lot more readable!
  • Refactors the value logic into its own method, as a getter.
  • Refactors the ad-hoc handlers for focus, input, and blur into functions on the render() method itself.
    • Alternatively, I could have put the handlers as methods on the ak-search-select Node itself; Lit would automatically bind this correctly if referenced through the @event syntax. Moving them out of the render() method would require significantly more testing, however, as that would change the code flow enough it might have risked the original behavior. By leaving them in the render() scope, this guarantees their original behavior -- whether that behavior is correct or not.
• FIXES build(deps-dev): bump bumpversion from 0.5.3 to 0.6.0 #15
  • Having isolated as much functionality as was possible, it was easy to change the onFocus() event so that when the user focuses on the <input> object, if it's currently populated with the empty option and the user specified isBlankable, clear it.
  • Notice: This creates a new, possibly undesirable behavior; since it's not possible to know why the input object is currently empty, in the event that it is currently empty as a result of this clearing there is no way to know when the "empty option" marker needs to be put back.

This is an incredibly complex bit of code, the sort that really shouldn't be written by application teams. The behavior is undefined in a number of cases, and although none of those cases are fatal, some of them are quite annoying. I recommend that we seriously consider adopting a third-party solution.

Selects (and DataLists) are notoriously difficult to get right on the desktop; they are almost impossible to get right on mobile. Every responsible implementation of Selects has a "default-to-native" experience on mobile because, for the most part, the mobile native experience is excellent -- delta wanting two-line <option> blocks and <optiongroup>s, both of which we do want.

This component implements:

• Rendering the <input> element and handling its behavior
• Rendering the <select> element and handling its behavior
• Mediating between these two components
• Fetching the data for the <select> component from the back-end
• Filtering the data via a partial-match search through the <input> element
• Distinguishing between hard-affirm and soft-affirm "No choice" options
• Dispatching the <select> element via a portal, the better to control rendering.

That's a lot of responsibilities! And it makes Storybooking this component non-viable. I recommend breaking this up further, but I've already spent a lot of time just doing the refactoring and getting the new behavior as right as possible, so for now I'm just going to submit the clean-up and come back to this later.

Details

• Does this resolve an issue?
  Resolves build(deps-dev): bump bumpversion from 0.5.3 to 0.6.0 #15

Checklist

• Local tests pass (ak test authentik/)
• The code has been formatted (make lint-fix)

No API Changes have been made.

If changes to the frontend have been made

• The code has been formatted (make web)
• The translation files have been updated (make i18n-extract)

No new dialog was added.