User cannot select list in dropdown when custom entry is entered

[amythetester]

Repro:

1. Open new log entry
2. Type in a new list name
3. Try to select the list dropdown to pick a list that already exists (aka I don't actually want my new list)

Expected: The list dropdown opens and allows me to select an existing list Actual: Dropdown list does not render when arrow is clicked

Workaround: Delete the custom list name and then try opening the list dropdown

[mmcknett]

Yes, this is annoying! This is a limitation of the implementation using a datalist with an input textbox, which is what I found online for recommendations for implementing a "combo box". As far as I can tell, there's no out-of-the-box parity replacement for the traditional combo box UX. Unfortunate.

My initial thoughts on a fix would involve one of these options:

1. Replace the data list with a React component that has good accessibility and implements a traditional combo box pattern.
2. Lean into the work around by adding a button to clear out the list entry box. (Maybe an X button that looks like it floats inside the text field?)
3. Implement my own combo box by hovering the text field over a select input that has the data list contents.

Option 1 is probably easiest, but I'd have to find the right library. I tried one that was hard to work with before switching to the data list.