Virtual list entry for arbitrary values in comboboxes

[charliepark]

Update how the allowArbitraryValue functionality works within comboboxes.

Essentially, this adds a new line below the input that says "Use {typed-in text}". Technically, what they've entered into the input is already set as the value, so this is more of an affordance for the UX, so the user has more confidence that they're selecting that option.

It works both to hit Enter and to select the Use db2 option.

I experimented with a "clear" button as well, but the UX for that wasn't really better than just deleting the input field's contents.
(Note: the following screenshot is NOT what is currently represented in this PR)

Closes #2507
Closes #2447

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
console	✅ Ready (Inspect)	Visit Preview	Nov 7, 2024 5:47pm

[charliepark]

I'm seeing some funny interactions with the text input, but am having trouble isolating the issue. Essentially, the text input doesn't always clear from the comboboxes when the "Add host filter" button is clicked. I don't think this has to do with the combobox, but will be worth sorting out.

[david-crespo]

I'm leaning back toward having a special treatment for the virtual entry, like Use or even Use custom value: ("custom" is tolerable but might not be the best word). The problem is kinda there all the time, but comes out most when you type in a letter that's not in any of the entries, so the list goes from having N real entries to having one virtual one. Kind of jarring.

2024-11-04-combobox-virtual.mp4

[david-crespo]

Looking good. It would be nice if we could fade the Use custom value

like in this screenshot which you said is of something other than this PR.

I'm experimenting. The label is a ReactNode already so it might be pretty easy.

[david-crespo]

I shortened the annotation down to Custom:, made it text-secondary, and fixed a bug where the virtual item would not appear when you blur and refocus. I don't love Custom: but it's the best I can come up with. Maybe a badge or some other little icon would be neat. But I think it's ok as-is.

2024-11-06-combobox-virtual.mp4

[david-crespo]

Ugh, the test failure is real. It's caused by my attempt to fix the blur and refocus thing. The fact that we're not clearing the query on blur means it is also not cleared when we change host filter types.

console/app/ui/lib/Combobox.tsx

Lines 126 to 127 in 45b8585

	// we only want to keep the query on close when arbitrary values are allowed
	onClose={allowArbitraryValues ? undefined : () => setQuery('')}

2024-11-06-sticky-custom-value.mp4

[david-crespo]

Found another bug that is probably also a consequence of getting rid of the onClose:

1. type in custom value
2. press enter, or blur, or click the item — any works
3. click add target
4. focus field

def is still there! This only happens with VPC type because the others revert back to VPC on submit, which clears the field because of the key added in a79be2e.

2024-11-06-stick-custom-2.mp4

[charliepark]

Looks really good, @david-crespo. I tried breaking it in a few different ways that seemed to occasionally break it earlier, and all seem to be patched.

[david-crespo]

Thanks for doing most of it!