Allow ReactElements to be used in Combobox dropdowns

[charliepark]

For #1837, we had a few more places that needed to get switched from a Listbox to a Combobox. Interestingly, all of our existing Comboboxes had had the same string used for both the label and the value, so there were a few places where the Combobox was using the label where it would more accurately use the value. As these were identical before, it didn't cause any problems. With this update, though, we'll begin using elements that have a different value from their label, so it's more important that we use the value.

One example of this is in the image selector, where we now have three elements — the value, the label, and an optional selectedLabel — a custom string for the ComboboxItem.

Here we see the selectedLabel in the input field, where the label for each item is the richer HTML in the dropdown.

Closes #1837
Closes #2483

[vercel]

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

Name	Status	Preview	Updated (UTC)
console	✅ Ready (Inspect)	Visit Preview	Oct 3, 2024 10:47pm

[david-crespo]

The behavior where it automatically focuses the image field on error is broken — In theory, ComboboxField needs the same fix ListboxField got in #2364. However, I am trying it and it's not working yet.

diff --git a/app/ui/lib/Combobox.tsx b/app/ui/lib/Combobox.tsx
index 946cd236..0dbfa2d9 100644
--- a/app/ui/lib/Combobox.tsx
+++ b/app/ui/lib/Combobox.tsx
@@ -15,7 +15,7 @@ import {
 } from '@headlessui/react'
 import cn from 'classnames'
 import { matchSorter } from 'match-sorter'
-import { useId, useState, type ReactNode } from 'react'
+import { useId, useState, type ReactNode, type Ref } from 'react'
 
 import { SelectArrows6Icon } from '@oxide/design-system/icons/react'
 
@@ -69,6 +69,8 @@ type ComboboxProps = {
   selectedItemLabel: string
   hasError?: boolean
   onChange: (value: string) => void
+  /** Necessary if you want RHF to be able to focus it on error */
+  inputRef?: Ref<HTMLInputElement>
 } & ComboboxBaseProps
 
 export const Combobox = ({
@@ -86,6 +88,7 @@ export const Combobox = ({
   onInputChange,
   allowArbitraryValues = false,
   hideOptionalTag,
+  inputRef,
   ...props
 }: ComboboxProps) => {
   const [query, setQuery] = useState(selectedItemValue || '')
@@ -147,6 +150,7 @@ export const Combobox = ({
                 : 'bg-default',
               hasError && 'focus-error'
             )}
+            ref={inputRef}
           />
           {items.length > 0 && (
             <ComboboxButton

[david-crespo]

Ok, it's working now. Weird.

[charliepark]

This also closes #2483

[charliepark]

This morning, talked through an edge case we'd like to polish up in a future release, but don't want to hold up merging this with the current release. I'll file a ticket, but the summary is that when there's a validation error, we can't open up the popup (by giving the input focus) without also obscuring the error message that's highlighting why it's in an error state.

Ben had a few ideas that we'll explore a bit in a subsequent branch.

[david-crespo]

woohoo!