Skip to content

Virtual list entry for arbitrary values in comboboxes#2518

Merged
david-crespo merged 15 commits into
mainfrom
new_style_for_arbitrary_option
Nov 7, 2024
Merged

Virtual list entry for arbitrary values in comboboxes#2518
david-crespo merged 15 commits into
mainfrom
new_style_for_arbitrary_option

Conversation

@charliepark

@charliepark charliepark commented Oct 23, 2024 •
edited
Loading

Copy link
Copy Markdown
Contributor

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.

arbitrary

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)
Screenshot 2024-10-23 at 4 30 55 PM

Closes #2507
Closes #2447

@vercel

vercel Bot commented Oct 23, 2024 •
edited
Loading

Copy link
Copy Markdown

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

charliepark commented Oct 24, 2024

Copy link
Copy Markdown
Contributor Author

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
david-crespo reviewed Oct 30, 2024
View reviewed changes
Comment thread app/ui/lib/Combobox.tsx Outdated
@david-crespo david-crespo changed the title Update how allowArbitraryValue functions in comboboxes Virtual list entry for arbitrary values in comboboxes Oct 30, 2024
@david-crespo

david-crespo commented Nov 4, 2024

Copy link
Copy Markdown
Collaborator

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

@charliepark charliepark mentioned this pull request Nov 4, 2024
Closed
@david-crespo

david-crespo commented Nov 6, 2024

Copy link
Copy Markdown
Collaborator

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

image

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

image

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

@david-crespo

david-crespo commented Nov 6, 2024 •
edited
Loading

Copy link
Copy Markdown
Collaborator

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

david-crespo commented Nov 6, 2024 •
edited
Loading

Copy link
Copy Markdown
Collaborator

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

david-crespo commented Nov 6, 2024

Copy link
Copy Markdown
Collaborator

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

@david-crespo david-crespo force-pushed the new_style_for_arbitrary_option branch from c0e88b0 to bc64570 Compare November 7, 2024 17:46
@charliepark

charliepark commented Nov 7, 2024

Copy link
Copy Markdown
Contributor Author

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

david-crespo commented Nov 7, 2024

Copy link
Copy Markdown
Collaborator

Thanks for doing most of it!

@david-crespo david-crespo merged commit 6f83d41 into main Nov 7, 2024
@david-crespo david-crespo deleted the new_style_for_arbitrary_option branch November 7, 2024 18:20
@david-crespo david-crespo mentioned this pull request Nov 7, 2024
Closed
david-crespo added a commit to oxidecomputer/omicron that referenced this pull request Nov 10, 2024
@david-crespo
Bump web console (breadcrumbs, rework IdP forms)
6ca64c4 
oxidecomputer/console@6eeab20...9ef82ba

* [9ef82bad](oxidecomputer/console@9ef82bad) oxidecomputer/console#2529
* [23beefea](oxidecomputer/console@23beefea) oxidecomputer/console#2537
* [48693a22](oxidecomputer/console@48693a22) oxidecomputer/console#2510
* [8da7b6d0](oxidecomputer/console@8da7b6d0) oxidecomputer/console#2539
* [5edf89ef](oxidecomputer/console@5edf89ef) oxidecomputer/console#2536
* [dcddc81f](oxidecomputer/console@dcddc81f) oxidecomputer/console#2538
* [6f83d416](oxidecomputer/console@6f83d416) oxidecomputer/console#2518
* [7dcd41c2](oxidecomputer/console@7dcd41c2) oxidecomputer/console#2511
* [b01ca85d](oxidecomputer/console@b01ca85d) bump omicron to latest main
* [b4920b11](oxidecomputer/console@b4920b11) oxidecomputer/console#2530
* [0552b62e](oxidecomputer/console@0552b62e) oxidecomputer/console#2527
* [ca7f6e20](oxidecomputer/console@ca7f6e20) oxidecomputer/console#2528
@david-crespo david-crespo mentioned this pull request Nov 10, 2024
Merged
david-crespo added a commit to oxidecomputer/omicron that referenced this pull request Nov 10, 2024
@david-crespo
Bump web console (breadcrumbs, rework IdP forms) (#7034)
7ce06f1 
oxidecomputer/console@6eeab20...9ef82ba

* [9ef82bad](oxidecomputer/console@9ef82bad)
oxidecomputer/console#2529
* [23beefea](oxidecomputer/console@23beefea)
oxidecomputer/console#2537
* [48693a22](oxidecomputer/console@48693a22)
oxidecomputer/console#2510
* [8da7b6d0](oxidecomputer/console@8da7b6d0)
oxidecomputer/console#2539
* [5edf89ef](oxidecomputer/console@5edf89ef)
oxidecomputer/console#2536
* [dcddc81f](oxidecomputer/console@dcddc81f)
oxidecomputer/console#2538
* [6f83d416](oxidecomputer/console@6f83d416)
oxidecomputer/console#2518
* [7dcd41c2](oxidecomputer/console@7dcd41c2)
oxidecomputer/console#2511
* [b01ca85d](oxidecomputer/console@b01ca85d)
bump omicron to latest main
* [b4920b11](oxidecomputer/console@b4920b11)
oxidecomputer/console#2530
* [0552b62e](oxidecomputer/console@0552b62e)
oxidecomputer/console#2527
* [ca7f6e20](oxidecomputer/console@ca7f6e20)
oxidecomputer/console#2528
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@david-crespo david-crespo david-crespo left review comments

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Add virtual item to list arbitrary values in comboboxes Workshop arbitrary values help text

2 participants

@charliepark @david-crespo