normalize combobox inputs; disallow spaces

app/components/form/fields/ComboboxField.tsx

@@ -21,7 +21,7 @@ import {
   getSelectedLabelFromValue,
   type ComboboxBaseProps,
 } from '~/ui/lib/Combobox'
-import { capitalize } from '~/util/str'
+import { capitalize, normalizeName } from '~/util/str'
 
 import { ErrorMessage } from './ErrorMessage'
 
@@ -60,6 +60,7 @@ export function ComboboxField<
       ? 'Select an option or enter a custom value'
       : 'Select an option',
   items,
+  transform = (value) => normalizeName(value, true),
   validate,
   ...props
 }: ComboboxFieldProps<TFieldValues, TName>) {
@@ -89,6 +90,7 @@ export function ComboboxField<
         }}
         allowArbitraryValues={allowArbitraryValues}
         inputRef={field.ref}
+        transform={transform}
         {...props}
       />
       <ErrorMessage error={fieldState.error} label={label} />

app/ui/lib/Combobox.tsx

@@ -64,6 +64,11 @@ export type ComboboxBaseProps = {
   onInputChange?: (value: string) => void
   /** Fires whenever the Enter key is pressed while Combobox input has focus */
   onEnter?: (event: React.KeyboardEvent<HTMLInputElement>) => void
+  /**
+   * Optional function to transform the value entered into the input as the user types.
+   * Defaults in ComboboxField to running the `normalizeName` function on the input value.
+   */
+  transform?: (value: string) => string
 }
 
 type ComboboxProps = {
@@ -93,6 +98,7 @@ export const Combobox = ({
   allowArbitraryValues = false,
   hideOptionalTag,
   inputRef,
+  transform,
   ...props
 }: ComboboxProps) => {
   const [query, setQuery] = useState(selectedItemValue || '')
@@ -189,17 +195,23 @@ export const Combobox = ({
           >
             <ComboboxInput
               id={`${id}-input`}
-              // displayValue controls what's displayed in the input field.
-              // selectedItemValue is displayed when the user can type in a new value.
-              // Otherwise, use the provided selectedItemLabel
-              displayValue={() =>
-                allowArbitraryValues ? selectedItemValue : selectedItemLabel
+              // If an option has been selected, display either the selected item's label or value.
+              // If no option has been selected yet, or the user has started editing the input, display the query.
+              // We are using value here, as opposed to Headless UI's displayValue, so we can normalize
+              // the value entered into the input (via the onChange event).
+              value={
+                selectedItemValue
+                  ? allowArbitraryValues
+                    ? selectedItemValue
+                    : selectedItemLabel
+                  : query
               }
               onChange={(event) => {
+                const value = transform ? transform(event.target.value) : event.target.value
                 // updates the query state as the user types, in order to filter the list of items
-                setQuery(event.target.value)
+                setQuery(value)
                 // if the parent component wants to know about input changes, call the callback
-                onInputChange?.(event.target.value)
+                onInputChange?.(value)
               }}
               onKeyDown={(e) => {
                 // Prevent form submission when the user presses Enter inside a combobox.

test/e2e/firewall-rules.e2e.ts

@@ -193,11 +193,13 @@ test('firewall rule form targets table', async ({ page }) => {
 
   // now add a subnet by entering text
   await selectOption(page, 'Target type', 'VPC subnet')
-  await subnetNameField.fill('abc')
+  // test that the name typed in is normalized
+  await subnetNameField.fill('ABC 123')
+  await expect(subnetNameField).toHaveValue('abc-123')
   // hit enter to submit the subform
   await subnetNameField.press('Enter')
   await subnetNameField.press('Enter')
-  await expectRowVisible(targets, { Type: 'subnet', Value: 'abc' })
+  await expectRowVisible(targets, { Type: 'subnet', Value: 'abc-123' })
 
   // add IP target
   await selectOption(page, 'Target type', 'IP')