From 0d1709aa7c007227c2ba957c743c0a5b9e182067 Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Thu, 14 May 2026 15:27:56 -0700
Subject: [PATCH 1/7] fix combobox editing issue

---
 app/components/form/fields/ComboboxField.tsx |  6 ++
 app/ui/lib/Combobox.tsx                      |  2 +-
 app/ui/lib/FileInput.tsx                     |  4 +-
 test/e2e/instance-create.e2e.ts              | 80 ++++++++++++++++++--
 4 files changed, 82 insertions(+), 10 deletions(-)

diff --git a/app/components/form/fields/ComboboxField.tsx b/app/components/form/fields/ComboboxField.tsx
index efa0558293..ce122b7484 100644
--- a/app/components/form/fields/ComboboxField.tsx
+++ b/app/components/form/fields/ComboboxField.tsx
@@ -45,6 +45,7 @@ export function ComboboxField<
   label = capitalize(name),
   required,
   onChange,
+  onInputChange,
   allowArbitraryValues,
   placeholder,
   // Intent is to not show both a placeholder and a description, while still having good defaults; prefer a description to a placeholder
@@ -88,6 +89,11 @@ export function ComboboxField<
           onChange?.(value)
           setSelectedItemLabel(getSelectedLabelFromValue(items, value))
         }}
+        onInputChange={(value) => {
+          // If the user edits the input field, if arbitrary values are allowed, set the field's value; otherwise, clear the selected value
+          field.onChange(allowArbitraryValues ? value : undefined)
+          onInputChange?.(value)
+        }}
         allowArbitraryValues={allowArbitraryValues}
         inputRef={field.ref}
         transform={transform}
diff --git a/app/ui/lib/Combobox.tsx b/app/ui/lib/Combobox.tsx
index 0abe2b54c8..b8b41b31fa 100644
--- a/app/ui/lib/Combobox.tsx
+++ b/app/ui/lib/Combobox.tsx
@@ -281,7 +281,7 @@ export const Combobox = ({
                       // of those rules one by one. Better to rely on the shared classes.
                       <div
                         className={cn('ox-menu-item', {
-                          'is-selected': selected && query !== item.value,
+                          'is-selected': selected,
                           'is-highlighted': focus,
                         })}
                       >
diff --git a/app/ui/lib/FileInput.tsx b/app/ui/lib/FileInput.tsx
index 3728a1d8ed..f099c057d6 100644
--- a/app/ui/lib/FileInput.tsx
+++ b/app/ui/lib/FileInput.tsx
@@ -36,6 +36,7 @@ export function FileInput({
   onChange,
   error,
   ref,
+  id,
   ...inputProps
 }: FileInputProps) {
   const inputRef = useRef<HTMLInputElement>(null)
@@ -63,8 +64,9 @@ export function FileInput({
   }
 
   return (
-    <label className={cn(className, 'group relative block')}>
+    <label htmlFor={id} className={cn(className, 'group relative block')}>
       <input
+        id={id}
         ref={mergeRefs([inputRef, ref])}
         type="file"
         name="file"
diff --git a/test/e2e/instance-create.e2e.ts b/test/e2e/instance-create.e2e.ts
index e7ed4d7852..82debe0794 100644
--- a/test/e2e/instance-create.e2e.ts
+++ b/test/e2e/instance-create.e2e.ts
@@ -37,6 +37,16 @@ const selectAnExistingDisk = async (page: Page, name: string) => {
   await page.getByRole('option', { name }).click()
 }
 
+/** Ensure that certain combobox options are present, others are hidden */
+const expectOptions = async (page: Page, present: string[], hidden: string[]) => {
+  for (const option of present) {
+    await expect(page.getByRole('option', { name: option })).toBeVisible()
+  }
+  for (const option of hidden) {
+    await expect(page.getByRole('option', { name: option })).toBeHidden()
+  }
+}
+
 test('can create an instance', async ({ page }) => {
   await page.goto('/projects/mock-project/instances')
   await page.locator('text="New Instance"').click()
@@ -567,18 +577,16 @@ test('attaching additional disks allows for combobox filtering', async ({ page }
   await attachExistingDiskButton.click()
   await selectADisk.click()
   // several disks should be shown
-  await expect(page.getByRole('option', { name: 'disk-0005' })).toBeVisible()
-  await expect(page.getByRole('option', { name: 'disk-0007' })).toBeVisible()
-  await expect(page.getByRole('option', { name: 'disk-0988' })).toBeVisible()
+  await expectOptions(page, ['disk-0005', 'disk-0007', 'disk-0988'], [])
 
   // type in a string to use as a filter
   await selectADisk.fill('disk-02')
   // only disks with that substring should be shown
-  await expect(page.getByRole('option', { name: 'disk-0023' })).toBeVisible()
-  await expect(page.getByRole('option', { name: 'disk-0125' })).toBeVisible()
-  await expect(page.getByRole('option', { name: 'disk-0211' })).toBeVisible()
-  await expect(page.getByRole('option', { name: 'disk-0220' })).toBeHidden()
-  await expect(page.getByRole('option', { name: 'disk-1000' })).toBeHidden()
+  await expectOptions(
+    page,
+    ['disk-0023', 'disk-0125', 'disk-0211'],
+    ['disk-0220', 'disk-1000']
+  )
 
   // select one
   await page.getByRole('option', { name: 'disk-0211' }).click()
@@ -715,6 +723,62 @@ test('Validate CPU and RAM', async ({ page }) => {
   await expect(memMsg).toBeVisible()
 })
 
+test('clears silo image selection when typing arbitrary text and blurring', async ({
+  page,
+}) => {
+  const instanceName = 'test-instance'
+  const validImage = 'ubuntu-22-04'
+  const alternateImage1 = 'ubuntu-20-04'
+  const alternateImage2 = 'arch-2022-06-01'
+
+  await page.goto('/projects/mock-project/instances-new')
+  await page.getByRole('textbox', { name: 'Name', exact: true }).fill(instanceName)
+
+  const imageSelectCombobox = page.getByRole('combobox', { name: 'Image' })
+  await imageSelectCombobox.scrollIntoViewIfNeeded()
+
+  // Ensure the combobox is visible and has the expected options
+  await expect(imageSelectCombobox).toHaveValue('')
+  await imageSelectCombobox.click()
+  await expectOptions(page, [validImage, alternateImage1, alternateImage2], [])
+
+  // Filter the combobox for a particular silo image pattern
+  await imageSelectCombobox.fill('ubuntu')
+
+  // Ensure that only show the options that match the filter are visible
+  await expectOptions(page, [validImage, alternateImage1], [alternateImage2])
+
+  // Select an image
+  await page.getByRole('option', { name: validImage }).click()
+  await expect(imageSelectCombobox).toHaveValue(validImage)
+
+  // Delete four characters from the end to reveal more options
+  await page.keyboard.press('Backspace')
+  await page.keyboard.press('Backspace')
+  await page.keyboard.press('Backspace')
+  await page.keyboard.press('Backspace')
+
+  // There should now be an invalid value in the combobox, but we should be able to see both the ubuntu options: `ubuntu-22-04` and `ubuntu-20-04`
+  // and we should NOT be able to see the `arch-2022-06-01` option
+  await expect(imageSelectCombobox).toHaveValue('ubuntu-2')
+  await expectOptions(page, [validImage, alternateImage1], [alternateImage2])
+
+  // Blur the field by clicking elsewhere; because the value is not a valid silo image, the selection should be cleared
+  await page.getByRole('textbox', { name: 'Name', exact: true }).click()
+
+  // The selection should be cleared since allowArbitraryValues=false
+  await expect(imageSelectCombobox).toHaveValue('')
+
+  // Re-focus and select the original option again
+  await imageSelectCombobox.click()
+  await page.getByRole('option', { name: validImage }).click()
+  await expect(imageSelectCombobox).toHaveValue(validImage)
+
+  // Should be able to continue with instance creation
+  await page.getByRole('button', { name: 'Create instance' }).click()
+  await expect(page).toHaveURL(`/projects/mock-project/instances/${instanceName}/storage`)
+})
+
 test('create instance with IPv6-only networking', async ({ page }) => {
   await page.goto('/projects/mock-project/instances-new')
 

From a6cc3eab3498a0bc2ee0b8aaedfc0d022c57e747 Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Thu, 14 May 2026 16:00:47 -0700
Subject: [PATCH 2/7] refactor expectOptions function

---
 test/e2e/firewall-rules.e2e.ts  | 38 +++++++++++----------------------
 test/e2e/instance-create.e2e.ts | 15 +++----------
 test/e2e/utils.ts               | 10 +++++++++
 3 files changed, 26 insertions(+), 37 deletions(-)

diff --git a/test/e2e/firewall-rules.e2e.ts b/test/e2e/firewall-rules.e2e.ts
index da4111ba38..9e36e5ef31 100644
--- a/test/e2e/firewall-rules.e2e.ts
+++ b/test/e2e/firewall-rules.e2e.ts
@@ -8,7 +8,7 @@
 
 import { expect, test, type Locator, type Page } from '@playwright/test'
 
-import { clickRowAction, expectRowVisible, selectOption } from './utils'
+import { clickRowAction, expectOptions, expectRowVisible, selectOption } from './utils'
 
 /**
  * Fill a combobox and click a dropdown option. Scrolls the combobox toward the
@@ -602,14 +602,6 @@ test('name conflict error on edit', async ({ page }) => {
   await expectRowVisible(page.getByRole('table'), { Name: 'allow-icmp2', Priority: '37' })
 })
 
-async function expectOptions(page: Page, options: string[]) {
-  const selector = page.getByRole('option')
-  await expect(selector).toHaveCount(options.length)
-  for (const option of options) {
-    await expect(page.getByRole('option', { name: option })).toBeVisible()
-  }
-}
-
 test('arbitrary values combobox', async ({ page }) => {
   await page.goto('/projects/mock-project/vpcs/mock-vpc/firewall-rules-new')
 
@@ -619,14 +611,14 @@ test('arbitrary values combobox', async ({ page }) => {
   await expectOptions(page, ['mock-vpc'])
 
   await vpcInput.fill('d')
-  await expectOptions(page, ['Custom: d'])
+  await expectOptions(page, ['Custom: d'], ['mock-vpc'])
 
   await vpcInput.blur()
   await page.getByRole('button', { name: 'Add target' }).click()
   await expect(vpcInput).toHaveValue('')
 
   await vpcInput.focus()
-  await expectOptions(page, ['mock-vpc']) // bug cause failure here
+  await expectOptions(page, ['mock-vpc'], ['Custom: d']) // bug cause failure here
 
   // test keeping query around on blur
   await selectOption(page, 'Target type', 'Instance')
@@ -643,13 +635,11 @@ test('arbitrary values combobox', async ({ page }) => {
   ])
 
   await input.fill('d')
-  await expectOptions(page, [
-    'db1',
-    'instance-update-error',
-    'db2',
-    'db-stopped',
-    'Custom: d',
-  ])
+  await expectOptions(
+    page,
+    ['db1', 'instance-update-error', 'db2', 'db-stopped', 'Custom: d'],
+    ['you-fail', 'not-there-yet']
+  )
 
   await input.blur()
   await expect(page.getByRole('option')).toBeHidden()
@@ -658,13 +648,11 @@ test('arbitrary values combobox', async ({ page }) => {
   await input.focus()
 
   // same options show up after blur (there was a bug around this)
-  await expectOptions(page, [
-    'db1',
-    'instance-update-error',
-    'db2',
-    'db-stopped',
-    'Custom: d',
-  ])
+  await expectOptions(
+    page,
+    ['db1', 'instance-update-error', 'db2', 'db-stopped', 'Custom: d'],
+    ['you-fail', 'not-there-yet']
+  )
 
   // make sure typing in ICMP filter input actually updates the underlying value,
   // triggering a validation error for bad input. without onInputChange binding
diff --git a/test/e2e/instance-create.e2e.ts b/test/e2e/instance-create.e2e.ts
index 82debe0794..05fbaa2f57 100644
--- a/test/e2e/instance-create.e2e.ts
+++ b/test/e2e/instance-create.e2e.ts
@@ -11,6 +11,7 @@ import {
   closeToast,
   expect,
   expectNotVisible,
+  expectOptions,
   expectRowVisible,
   expectVisible,
   fillNumberInput,
@@ -37,16 +38,6 @@ const selectAnExistingDisk = async (page: Page, name: string) => {
   await page.getByRole('option', { name }).click()
 }
 
-/** Ensure that certain combobox options are present, others are hidden */
-const expectOptions = async (page: Page, present: string[], hidden: string[]) => {
-  for (const option of present) {
-    await expect(page.getByRole('option', { name: option })).toBeVisible()
-  }
-  for (const option of hidden) {
-    await expect(page.getByRole('option', { name: option })).toBeHidden()
-  }
-}
-
 test('can create an instance', async ({ page }) => {
   await page.goto('/projects/mock-project/instances')
   await page.locator('text="New Instance"').click()
@@ -1301,7 +1292,7 @@ test('floating IPs are filtered by NIC IP version', async ({ page }) => {
   // Verify only IPv4 floating IP is available (rootbeer-float with IP 123.4.56.4)
   await expect(page.getByRole('option', { name: 'rootbeer-float' })).toBeVisible()
   // IPv6 floating IP should not be in the list
-  await expect(page.getByRole('option', { name: 'ipv6-float' })).not.toBeVisible()
+  await expect(page.getByRole('option', { name: 'ipv6-float' })).toBeHidden()
 
   // Close the listbox dropdown first by pressing Escape
   await page.keyboard.press('Escape')
@@ -1326,7 +1317,7 @@ test('floating IPs are filtered by NIC IP version', async ({ page }) => {
   // Verify only IPv6 floating IP is available (ipv6-float)
   await expect(page.getByRole('option', { name: 'ipv6-float' })).toBeVisible()
   // IPv4 floating IP should not be in the list
-  await expect(page.getByRole('option', { name: 'rootbeer-float' })).not.toBeVisible()
+  await expect(page.getByRole('option', { name: 'rootbeer-float' })).toBeHidden()
 
   // Close the listbox dropdown first by pressing Escape
   await page.keyboard.press('Escape')
diff --git a/test/e2e/utils.ts b/test/e2e/utils.ts
index 0ee45106ac..44a3f230e6 100644
--- a/test/e2e/utils.ts
+++ b/test/e2e/utils.ts
@@ -51,6 +51,16 @@ export async function expectNotVisible(page: Page, selectors: Selector[]) {
   }
 }
 
+/** Ensure that certain combobox options are present, others are hidden */
+export async function expectOptions(page: Page, present: string[], hidden: string[] = []) {
+  for (const option of present) {
+    await expect(page.getByRole('option', { name: option })).toBeVisible()
+  }
+  for (const option of hidden) {
+    await expect(page.getByRole('option', { name: option })).toBeHidden()
+  }
+}
+
 /**
  * Locate the value cell next to a label in a PropertiesTable. The component
  * renders label/value as adjacent sibling elements in a CSS grid, so we use

From 0b81d436d3bd6c22bea963b07b5fdc33b496599a Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Thu, 14 May 2026 16:59:40 -0700
Subject: [PATCH 3/7] clean up a few more tests

---
 test/e2e/fleet-access.e2e.ts        | 18 +++++++++++++-----
 test/e2e/ip-pool-silo-config.e2e.ts |  6 ++----
 test/e2e/subnet-pools.e2e.ts        | 15 ++++++++-------
 3 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/test/e2e/fleet-access.e2e.ts b/test/e2e/fleet-access.e2e.ts
index 865de1d55f..c59cff2a63 100644
--- a/test/e2e/fleet-access.e2e.ts
+++ b/test/e2e/fleet-access.e2e.ts
@@ -7,7 +7,14 @@
  */
 import { crossSiloGroupId, crossSiloUserId, user3 } from '@oxide/api-mocks'
 
-import { expect, expectRowVisible, expectToast, getPageAsUser, test } from './utils'
+import {
+  expect,
+  expectOptions,
+  expectRowVisible,
+  expectToast,
+  getPageAsUser,
+  test,
+} from './utils'
 
 test('Click through fleet access page', async ({ page }) => {
   await page.goto('/system/access')
@@ -58,10 +65,11 @@ test('Click through fleet access page', async ({ page }) => {
 
   await page.getByRole('button', { name: /User or group/ }).click()
   // users already assigned should not be in the list
-  await expect(page.getByRole('option', { name: 'Hannah Arendt' })).toBeHidden()
-  await expect(page.getByRole('option', { name: 'Jacob Klein' })).toBeVisible()
-  await expect(page.getByRole('option', { name: 'Hans Jonas' })).toBeVisible()
-  await expect(page.getByRole('option', { name: 'Simone de Beauvoir' })).toBeVisible()
+  await expectOptions(
+    page,
+    ['Jacob Klein', 'Hans Jonas', 'Simone de Beauvoir'],
+    ['Hannah Arendt']
+  )
 
   await page.getByRole('option', { name: 'Jacob Klein' }).click()
   await page.getByRole('radio', { name: /^Collaborator / }).click()
diff --git a/test/e2e/ip-pool-silo-config.e2e.ts b/test/e2e/ip-pool-silo-config.e2e.ts
index 59406849d2..e0f3837be4 100644
--- a/test/e2e/ip-pool-silo-config.e2e.ts
+++ b/test/e2e/ip-pool-silo-config.e2e.ts
@@ -20,6 +20,7 @@ import {
   clickRowAction,
   closeToast,
   expect,
+  expectOptions,
   expectRowVisible,
   getPageAsUser,
   test,
@@ -150,10 +151,7 @@ test.describe('IP pool configuration: myriad silo (v4-only default)', () => {
 
     // Verify v6 pools are not available
     await page.getByLabel('Pool').click()
-    await expect(page.getByRole('option', { name: 'ip-pool-1' })).toBeVisible()
-    await expect(page.getByRole('option', { name: 'ip-pool-3' })).toBeVisible()
-    await expect(page.getByRole('option', { name: 'ip-pool-2' })).toBeHidden()
-    await expect(page.getByRole('option', { name: 'ip-pool-4' })).toBeHidden()
+    await expectOptions(page, ['ip-pool-1', 'ip-pool-3'], ['ip-pool-2', 'ip-pool-4'])
 
     // Select ip-pool-1 (close dropdown first) and attach
     await page.getByRole('option', { name: 'ip-pool-1' }).click()
diff --git a/test/e2e/subnet-pools.e2e.ts b/test/e2e/subnet-pools.e2e.ts
index 92493314bc..1fc661e6e7 100644
--- a/test/e2e/subnet-pools.e2e.ts
+++ b/test/e2e/subnet-pools.e2e.ts
@@ -10,6 +10,7 @@ import { expect, test } from '@playwright/test'
 
 import {
   clickRowAction,
+  expectOptions,
   expectRowVisible,
   expectToast,
   fillNumberInput,
@@ -318,15 +319,15 @@ test('Subnet pool picker only shows silo-linked pools', async ({ browser }) => {
   const page = await getPageAsUser(browser, 'Aryeh Kosman')
   await page.goto('/projects/kosman-project/external-subnets-new')
 
-  // myriad silo has default-v4-subnet-pool and myriad-v4-subnet-pool linked
+  // myriad silo has default-v4-subnet-pool and myriad-v4-subnet-pool linked;
+  // pools not linked to myriad should not appear
   const poolButton = page.getByRole('button', { name: 'Subnet pool' })
   await poolButton.click()
-  await expect(page.getByRole('option', { name: 'default-v4-subnet-pool' })).toBeVisible()
-  await expect(page.getByRole('option', { name: 'myriad-v4-subnet-pool' })).toBeVisible()
-
-  // pools not linked to myriad should not appear
-  await expect(page.getByRole('option', { name: 'secondary-v4-subnet-pool' })).toBeHidden()
-  await expect(page.getByRole('option', { name: 'ipv6-subnet-pool' })).toBeHidden()
+  await expectOptions(
+    page,
+    ['default-v4-subnet-pool', 'myriad-v4-subnet-pool'],
+    ['secondary-v4-subnet-pool', 'ipv6-subnet-pool']
+  )
 })
 
 test('External subnet create with myriad silo pool', async ({ browser }) => {

From 7869ec56f7bc5f38bd6aa178f479eaaac21fa9ba Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Thu, 14 May 2026 17:28:09 -0700
Subject: [PATCH 4/7] back out a few of the e2e changes

---
 test/e2e/firewall-rules.e2e.ts      | 38 +++++++++++++++++++----------
 test/e2e/fleet-access.e2e.ts        | 18 ++++----------
 test/e2e/instance-create.e2e.ts     | 27 ++++++++++++--------
 test/e2e/ip-pool-silo-config.e2e.ts |  6 +++--
 test/e2e/subnet-pools.e2e.ts        | 15 ++++++------
 test/e2e/utils.ts                   | 10 --------
 6 files changed, 58 insertions(+), 56 deletions(-)

diff --git a/test/e2e/firewall-rules.e2e.ts b/test/e2e/firewall-rules.e2e.ts
index 9e36e5ef31..da4111ba38 100644
--- a/test/e2e/firewall-rules.e2e.ts
+++ b/test/e2e/firewall-rules.e2e.ts
@@ -8,7 +8,7 @@
 
 import { expect, test, type Locator, type Page } from '@playwright/test'
 
-import { clickRowAction, expectOptions, expectRowVisible, selectOption } from './utils'
+import { clickRowAction, expectRowVisible, selectOption } from './utils'
 
 /**
  * Fill a combobox and click a dropdown option. Scrolls the combobox toward the
@@ -602,6 +602,14 @@ test('name conflict error on edit', async ({ page }) => {
   await expectRowVisible(page.getByRole('table'), { Name: 'allow-icmp2', Priority: '37' })
 })
 
+async function expectOptions(page: Page, options: string[]) {
+  const selector = page.getByRole('option')
+  await expect(selector).toHaveCount(options.length)
+  for (const option of options) {
+    await expect(page.getByRole('option', { name: option })).toBeVisible()
+  }
+}
+
 test('arbitrary values combobox', async ({ page }) => {
   await page.goto('/projects/mock-project/vpcs/mock-vpc/firewall-rules-new')
 
@@ -611,14 +619,14 @@ test('arbitrary values combobox', async ({ page }) => {
   await expectOptions(page, ['mock-vpc'])
 
   await vpcInput.fill('d')
-  await expectOptions(page, ['Custom: d'], ['mock-vpc'])
+  await expectOptions(page, ['Custom: d'])
 
   await vpcInput.blur()
   await page.getByRole('button', { name: 'Add target' }).click()
   await expect(vpcInput).toHaveValue('')
 
   await vpcInput.focus()
-  await expectOptions(page, ['mock-vpc'], ['Custom: d']) // bug cause failure here
+  await expectOptions(page, ['mock-vpc']) // bug cause failure here
 
   // test keeping query around on blur
   await selectOption(page, 'Target type', 'Instance')
@@ -635,11 +643,13 @@ test('arbitrary values combobox', async ({ page }) => {
   ])
 
   await input.fill('d')
-  await expectOptions(
-    page,
-    ['db1', 'instance-update-error', 'db2', 'db-stopped', 'Custom: d'],
-    ['you-fail', 'not-there-yet']
-  )
+  await expectOptions(page, [
+    'db1',
+    'instance-update-error',
+    'db2',
+    'db-stopped',
+    'Custom: d',
+  ])
 
   await input.blur()
   await expect(page.getByRole('option')).toBeHidden()
@@ -648,11 +658,13 @@ test('arbitrary values combobox', async ({ page }) => {
   await input.focus()
 
   // same options show up after blur (there was a bug around this)
-  await expectOptions(
-    page,
-    ['db1', 'instance-update-error', 'db2', 'db-stopped', 'Custom: d'],
-    ['you-fail', 'not-there-yet']
-  )
+  await expectOptions(page, [
+    'db1',
+    'instance-update-error',
+    'db2',
+    'db-stopped',
+    'Custom: d',
+  ])
 
   // make sure typing in ICMP filter input actually updates the underlying value,
   // triggering a validation error for bad input. without onInputChange binding
diff --git a/test/e2e/fleet-access.e2e.ts b/test/e2e/fleet-access.e2e.ts
index c59cff2a63..865de1d55f 100644
--- a/test/e2e/fleet-access.e2e.ts
+++ b/test/e2e/fleet-access.e2e.ts
@@ -7,14 +7,7 @@
  */
 import { crossSiloGroupId, crossSiloUserId, user3 } from '@oxide/api-mocks'
 
-import {
-  expect,
-  expectOptions,
-  expectRowVisible,
-  expectToast,
-  getPageAsUser,
-  test,
-} from './utils'
+import { expect, expectRowVisible, expectToast, getPageAsUser, test } from './utils'
 
 test('Click through fleet access page', async ({ page }) => {
   await page.goto('/system/access')
@@ -65,11 +58,10 @@ test('Click through fleet access page', async ({ page }) => {
 
   await page.getByRole('button', { name: /User or group/ }).click()
   // users already assigned should not be in the list
-  await expectOptions(
-    page,
-    ['Jacob Klein', 'Hans Jonas', 'Simone de Beauvoir'],
-    ['Hannah Arendt']
-  )
+  await expect(page.getByRole('option', { name: 'Hannah Arendt' })).toBeHidden()
+  await expect(page.getByRole('option', { name: 'Jacob Klein' })).toBeVisible()
+  await expect(page.getByRole('option', { name: 'Hans Jonas' })).toBeVisible()
+  await expect(page.getByRole('option', { name: 'Simone de Beauvoir' })).toBeVisible()
 
   await page.getByRole('option', { name: 'Jacob Klein' }).click()
   await page.getByRole('radio', { name: /^Collaborator / }).click()
diff --git a/test/e2e/instance-create.e2e.ts b/test/e2e/instance-create.e2e.ts
index 05fbaa2f57..c49ccc261d 100644
--- a/test/e2e/instance-create.e2e.ts
+++ b/test/e2e/instance-create.e2e.ts
@@ -11,7 +11,6 @@ import {
   closeToast,
   expect,
   expectNotVisible,
-  expectOptions,
   expectRowVisible,
   expectVisible,
   fillNumberInput,
@@ -568,16 +567,18 @@ test('attaching additional disks allows for combobox filtering', async ({ page }
   await attachExistingDiskButton.click()
   await selectADisk.click()
   // several disks should be shown
-  await expectOptions(page, ['disk-0005', 'disk-0007', 'disk-0988'], [])
+  await expect(page.getByRole('option', { name: 'disk-0005' })).toBeVisible()
+  await expect(page.getByRole('option', { name: 'disk-0007' })).toBeVisible()
+  await expect(page.getByRole('option', { name: 'disk-0988' })).toBeVisible()
 
   // type in a string to use as a filter
   await selectADisk.fill('disk-02')
   // only disks with that substring should be shown
-  await expectOptions(
-    page,
-    ['disk-0023', 'disk-0125', 'disk-0211'],
-    ['disk-0220', 'disk-1000']
-  )
+  await expect(page.getByRole('option', { name: 'disk-0023' })).toBeVisible()
+  await expect(page.getByRole('option', { name: 'disk-0125' })).toBeVisible()
+  await expect(page.getByRole('option', { name: 'disk-0211' })).toBeVisible()
+  await expect(page.getByRole('option', { name: 'disk-0220' })).toBeHidden()
+  await expect(page.getByRole('option', { name: 'disk-1000' })).toBeHidden()
 
   // select one
   await page.getByRole('option', { name: 'disk-0211' }).click()
@@ -731,13 +732,17 @@ test('clears silo image selection when typing arbitrary text and blurring', asyn
   // Ensure the combobox is visible and has the expected options
   await expect(imageSelectCombobox).toHaveValue('')
   await imageSelectCombobox.click()
-  await expectOptions(page, [validImage, alternateImage1, alternateImage2], [])
+  await expect(page.getByRole('option', { name: validImage })).toBeVisible()
+  await expect(page.getByRole('option', { name: alternateImage1 })).toBeVisible()
+  await expect(page.getByRole('option', { name: alternateImage2 })).toBeVisible()
 
   // Filter the combobox for a particular silo image pattern
   await imageSelectCombobox.fill('ubuntu')
 
   // Ensure that only show the options that match the filter are visible
-  await expectOptions(page, [validImage, alternateImage1], [alternateImage2])
+  await expect(page.getByRole('option', { name: validImage })).toBeVisible()
+  await expect(page.getByRole('option', { name: alternateImage1 })).toBeVisible()
+  await expect(page.getByRole('option', { name: alternateImage2 })).toBeHidden()
 
   // Select an image
   await page.getByRole('option', { name: validImage }).click()
@@ -752,7 +757,9 @@ test('clears silo image selection when typing arbitrary text and blurring', asyn
   // There should now be an invalid value in the combobox, but we should be able to see both the ubuntu options: `ubuntu-22-04` and `ubuntu-20-04`
   // and we should NOT be able to see the `arch-2022-06-01` option
   await expect(imageSelectCombobox).toHaveValue('ubuntu-2')
-  await expectOptions(page, [validImage, alternateImage1], [alternateImage2])
+  await expect(page.getByRole('option', { name: validImage })).toBeVisible()
+  await expect(page.getByRole('option', { name: alternateImage1 })).toBeVisible()
+  await expect(page.getByRole('option', { name: alternateImage2 })).toBeHidden()
 
   // Blur the field by clicking elsewhere; because the value is not a valid silo image, the selection should be cleared
   await page.getByRole('textbox', { name: 'Name', exact: true }).click()
diff --git a/test/e2e/ip-pool-silo-config.e2e.ts b/test/e2e/ip-pool-silo-config.e2e.ts
index e0f3837be4..59406849d2 100644
--- a/test/e2e/ip-pool-silo-config.e2e.ts
+++ b/test/e2e/ip-pool-silo-config.e2e.ts
@@ -20,7 +20,6 @@ import {
   clickRowAction,
   closeToast,
   expect,
-  expectOptions,
   expectRowVisible,
   getPageAsUser,
   test,
@@ -151,7 +150,10 @@ test.describe('IP pool configuration: myriad silo (v4-only default)', () => {
 
     // Verify v6 pools are not available
     await page.getByLabel('Pool').click()
-    await expectOptions(page, ['ip-pool-1', 'ip-pool-3'], ['ip-pool-2', 'ip-pool-4'])
+    await expect(page.getByRole('option', { name: 'ip-pool-1' })).toBeVisible()
+    await expect(page.getByRole('option', { name: 'ip-pool-3' })).toBeVisible()
+    await expect(page.getByRole('option', { name: 'ip-pool-2' })).toBeHidden()
+    await expect(page.getByRole('option', { name: 'ip-pool-4' })).toBeHidden()
 
     // Select ip-pool-1 (close dropdown first) and attach
     await page.getByRole('option', { name: 'ip-pool-1' }).click()
diff --git a/test/e2e/subnet-pools.e2e.ts b/test/e2e/subnet-pools.e2e.ts
index 1fc661e6e7..92493314bc 100644
--- a/test/e2e/subnet-pools.e2e.ts
+++ b/test/e2e/subnet-pools.e2e.ts
@@ -10,7 +10,6 @@ import { expect, test } from '@playwright/test'
 
 import {
   clickRowAction,
-  expectOptions,
   expectRowVisible,
   expectToast,
   fillNumberInput,
@@ -319,15 +318,15 @@ test('Subnet pool picker only shows silo-linked pools', async ({ browser }) => {
   const page = await getPageAsUser(browser, 'Aryeh Kosman')
   await page.goto('/projects/kosman-project/external-subnets-new')
 
-  // myriad silo has default-v4-subnet-pool and myriad-v4-subnet-pool linked;
-  // pools not linked to myriad should not appear
+  // myriad silo has default-v4-subnet-pool and myriad-v4-subnet-pool linked
   const poolButton = page.getByRole('button', { name: 'Subnet pool' })
   await poolButton.click()
-  await expectOptions(
-    page,
-    ['default-v4-subnet-pool', 'myriad-v4-subnet-pool'],
-    ['secondary-v4-subnet-pool', 'ipv6-subnet-pool']
-  )
+  await expect(page.getByRole('option', { name: 'default-v4-subnet-pool' })).toBeVisible()
+  await expect(page.getByRole('option', { name: 'myriad-v4-subnet-pool' })).toBeVisible()
+
+  // pools not linked to myriad should not appear
+  await expect(page.getByRole('option', { name: 'secondary-v4-subnet-pool' })).toBeHidden()
+  await expect(page.getByRole('option', { name: 'ipv6-subnet-pool' })).toBeHidden()
 })
 
 test('External subnet create with myriad silo pool', async ({ browser }) => {
diff --git a/test/e2e/utils.ts b/test/e2e/utils.ts
index 44a3f230e6..0ee45106ac 100644
--- a/test/e2e/utils.ts
+++ b/test/e2e/utils.ts
@@ -51,16 +51,6 @@ export async function expectNotVisible(page: Page, selectors: Selector[]) {
   }
 }
 
-/** Ensure that certain combobox options are present, others are hidden */
-export async function expectOptions(page: Page, present: string[], hidden: string[] = []) {
-  for (const option of present) {
-    await expect(page.getByRole('option', { name: option })).toBeVisible()
-  }
-  for (const option of hidden) {
-    await expect(page.getByRole('option', { name: option })).toBeHidden()
-  }
-}
-
 /**
  * Locate the value cell next to a label in a PropertiesTable. The component
  * renders label/value as adjacent sibling elements in a CSS grid, so we use

From 26af13be63e8224bc4627ce4aab2223524a0e0c0 Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Thu, 14 May 2026 20:00:26 -0700
Subject: [PATCH 5/7] don't use aliased image names

---
 test/e2e/instance-create.e2e.ts | 29 +++++++++++++----------------
 1 file changed, 13 insertions(+), 16 deletions(-)

diff --git a/test/e2e/instance-create.e2e.ts b/test/e2e/instance-create.e2e.ts
index c49ccc261d..88196bd221 100644
--- a/test/e2e/instance-create.e2e.ts
+++ b/test/e2e/instance-create.e2e.ts
@@ -719,9 +719,6 @@ test('clears silo image selection when typing arbitrary text and blurring', asyn
   page,
 }) => {
   const instanceName = 'test-instance'
-  const validImage = 'ubuntu-22-04'
-  const alternateImage1 = 'ubuntu-20-04'
-  const alternateImage2 = 'arch-2022-06-01'
 
   await page.goto('/projects/mock-project/instances-new')
   await page.getByRole('textbox', { name: 'Name', exact: true }).fill(instanceName)
@@ -732,21 +729,21 @@ test('clears silo image selection when typing arbitrary text and blurring', asyn
   // Ensure the combobox is visible and has the expected options
   await expect(imageSelectCombobox).toHaveValue('')
   await imageSelectCombobox.click()
-  await expect(page.getByRole('option', { name: validImage })).toBeVisible()
-  await expect(page.getByRole('option', { name: alternateImage1 })).toBeVisible()
-  await expect(page.getByRole('option', { name: alternateImage2 })).toBeVisible()
+  await expect(page.getByRole('option', { name: 'ubuntu-22-04' })).toBeVisible()
+  await expect(page.getByRole('option', { name: 'ubuntu-20-04' })).toBeVisible()
+  await expect(page.getByRole('option', { name: 'arch-2022-06-01' })).toBeVisible()
 
   // Filter the combobox for a particular silo image pattern
   await imageSelectCombobox.fill('ubuntu')
 
   // Ensure that only show the options that match the filter are visible
-  await expect(page.getByRole('option', { name: validImage })).toBeVisible()
-  await expect(page.getByRole('option', { name: alternateImage1 })).toBeVisible()
-  await expect(page.getByRole('option', { name: alternateImage2 })).toBeHidden()
+  await expect(page.getByRole('option', { name: 'ubuntu-22-04' })).toBeVisible()
+  await expect(page.getByRole('option', { name: 'ubuntu-20-04' })).toBeVisible()
+  await expect(page.getByRole('option', { name: 'arch-2022-06-01' })).toBeHidden()
 
   // Select an image
-  await page.getByRole('option', { name: validImage }).click()
-  await expect(imageSelectCombobox).toHaveValue(validImage)
+  await page.getByRole('option', { name: 'ubuntu-22-04' }).click()
+  await expect(imageSelectCombobox).toHaveValue('ubuntu-22-04')
 
   // Delete four characters from the end to reveal more options
   await page.keyboard.press('Backspace')
@@ -757,9 +754,9 @@ test('clears silo image selection when typing arbitrary text and blurring', asyn
   // There should now be an invalid value in the combobox, but we should be able to see both the ubuntu options: `ubuntu-22-04` and `ubuntu-20-04`
   // and we should NOT be able to see the `arch-2022-06-01` option
   await expect(imageSelectCombobox).toHaveValue('ubuntu-2')
-  await expect(page.getByRole('option', { name: validImage })).toBeVisible()
-  await expect(page.getByRole('option', { name: alternateImage1 })).toBeVisible()
-  await expect(page.getByRole('option', { name: alternateImage2 })).toBeHidden()
+  await expect(page.getByRole('option', { name: 'ubuntu-22-04' })).toBeVisible()
+  await expect(page.getByRole('option', { name: 'ubuntu-20-04' })).toBeVisible()
+  await expect(page.getByRole('option', { name: 'arch-2022-06-01' })).toBeHidden()
 
   // Blur the field by clicking elsewhere; because the value is not a valid silo image, the selection should be cleared
   await page.getByRole('textbox', { name: 'Name', exact: true }).click()
@@ -769,8 +766,8 @@ test('clears silo image selection when typing arbitrary text and blurring', asyn
 
   // Re-focus and select the original option again
   await imageSelectCombobox.click()
-  await page.getByRole('option', { name: validImage }).click()
-  await expect(imageSelectCombobox).toHaveValue(validImage)
+  await page.getByRole('option', { name: 'ubuntu-22-04' }).click()
+  await expect(imageSelectCombobox).toHaveValue('ubuntu-22-04')
 
   // Should be able to continue with instance creation
   await page.getByRole('button', { name: 'Create instance' }).click()

From 1393c0b8403715d34262ea661a44aed7350e4562 Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Fri, 15 May 2026 09:48:03 -0700
Subject: [PATCH 6/7] remove unneeded/redundant accessibility tweak

---
 app/components/form/fields/ComboboxField.tsx | 2 +-
 app/ui/lib/FileInput.tsx                     | 4 +---
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/app/components/form/fields/ComboboxField.tsx b/app/components/form/fields/ComboboxField.tsx
index ce122b7484..e77ee7c6d6 100644
--- a/app/components/form/fields/ComboboxField.tsx
+++ b/app/components/form/fields/ComboboxField.tsx
@@ -90,7 +90,7 @@ export function ComboboxField<
           setSelectedItemLabel(getSelectedLabelFromValue(items, value))
         }}
         onInputChange={(value) => {
-          // If the user edits the input field, if arbitrary values are allowed, set the field's value; otherwise, clear the selected value
+          // if arbitrary values are allowed, set the field's value; otherwise, clear the selected value
           field.onChange(allowArbitraryValues ? value : undefined)
           onInputChange?.(value)
         }}
diff --git a/app/ui/lib/FileInput.tsx b/app/ui/lib/FileInput.tsx
index f099c057d6..3728a1d8ed 100644
--- a/app/ui/lib/FileInput.tsx
+++ b/app/ui/lib/FileInput.tsx
@@ -36,7 +36,6 @@ export function FileInput({
   onChange,
   error,
   ref,
-  id,
   ...inputProps
 }: FileInputProps) {
   const inputRef = useRef<HTMLInputElement>(null)
@@ -64,9 +63,8 @@ export function FileInput({
   }
 
   return (
-    <label htmlFor={id} className={cn(className, 'group relative block')}>
+    <label className={cn(className, 'group relative block')}>
       <input
-        id={id}
         ref={mergeRefs([inputRef, ref])}
         type="file"
         name="file"

From 7e7e46db88ba8b6ab3a1395c7713d5bba038db38 Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Fri, 15 May 2026 11:20:34 -0700
Subject: [PATCH 7/7] remove redundant handler

---
 app/components/form/fields/ComboboxField.tsx | 2 +-
 app/forms/firewall-rules-common.tsx          | 5 -----
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/app/components/form/fields/ComboboxField.tsx b/app/components/form/fields/ComboboxField.tsx
index e77ee7c6d6..53fa624c1b 100644
--- a/app/components/form/fields/ComboboxField.tsx
+++ b/app/components/form/fields/ComboboxField.tsx
@@ -91,7 +91,7 @@ export function ComboboxField<
         }}
         onInputChange={(value) => {
           // if arbitrary values are allowed, set the field's value; otherwise, clear the selected value
-          field.onChange(allowArbitraryValues ? value : undefined)
+          field.onChange(allowArbitraryValues ? value : '')
           onInputChange?.(value)
         }}
         allowArbitraryValues={allowArbitraryValues}
diff --git a/app/forms/firewall-rules-common.tsx b/app/forms/firewall-rules-common.tsx
index 56340d04f9..756911ff45 100644
--- a/app/forms/firewall-rules-common.tsx
+++ b/app/forms/firewall-rules-common.tsx
@@ -158,9 +158,6 @@ const TargetAndHostFilterSubform = ({
   const onTypeChange = () => {
     subform.reset({ type: subform.getValues('type'), value: '' })
   }
-  const onInputChange = (value: string) => {
-    subform.setValue('value', value)
-  }
 
   const noun = sectionType === 'target' ? 'target' : 'host filter'
   const nounTitle = capitalize(noun) + 's'
@@ -187,7 +184,6 @@ const TargetAndHostFilterSubform = ({
           description="Select an option or enter a custom value"
           control={subformControl}
           onEnter={submitSubform}
-          onInputChange={onInputChange}
           items={items}
           allowArbitraryValues
           hideOptionalTag
@@ -472,7 +468,6 @@ const ProtocolFilters = ({ control }: { control: Control<FirewallRuleValues> })
                 description="Leave blank to match any type"
                 placeholder=""
                 allowArbitraryValues
-                onInputChange={(value) => protocolForm.setValue('icmpType', value)}
                 items={icmpTypeItems}
                 validate={(value) => {
                   const result = parseIcmpType(value)