From 228651648bbf965792b4eaebe169f70b80045696 Mon Sep 17 00:00:00 2001
From: David Crespo <david.crespo@oxidecomputer.com>
Date: Wed, 17 Dec 2025 19:10:42 -0600
Subject: [PATCH] try to fix firewall rule test flake

---
 app/forms/firewall-rules-common.tsx |  6 ++++++
 app/ui/lib/Combobox.tsx             | 16 +++++++++-------
 test/e2e/firewall-rules.e2e.ts      |  4 ----
 3 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/app/forms/firewall-rules-common.tsx b/app/forms/firewall-rules-common.tsx
index 9b022758a..997febe9b 100644
--- a/app/forms/firewall-rules-common.tsx
+++ b/app/forms/firewall-rules-common.tsx
@@ -494,6 +494,12 @@ const ProtocolFilters = ({ control }: { control: Control<FirewallRuleValues> })
                   placeholder=""
                   validate={icmpCodeValidation}
                   transform={normalizeDashes}
+                  onKeyDown={(e) => {
+                    if (e.key === KEYS.enter) {
+                      e.preventDefault() // prevent full form submission
+                      submitProtocol(e)
+                    }
+                  }}
                 />
               )}
             </>
diff --git a/app/ui/lib/Combobox.tsx b/app/ui/lib/Combobox.tsx
index 1fc063042..31e2c9ae4 100644
--- a/app/ui/lib/Combobox.tsx
+++ b/app/ui/lib/Combobox.tsx
@@ -213,14 +213,16 @@ export const Combobox = ({
                 onInputChange?.(value)
               }}
               onKeyDown={(e) => {
-                // If the caller is using onEnter to override enter behavior, preventDefault
-                // in order to prevent the containing form from being submitted too. We don't
-                // need to do this when the combobox is open because that enter keypress is
-                // already handled internally (selects the highlighted item). So we only do
-                // this when the combobox is closed.
-                if (e.key === 'Enter' && onEnter && !open) {
+                // When the combobox is open, Enter is handled internally by
+                // Headless UI (selects the highlighted item). When closed,
+                // we need to prevent the default behavior to avoid submitting
+                // the containing form. We also considered always preventing
+                // default on Enter regardless of open status, but it appears
+                // to break the combobox handling. Headless UI likely checks
+                // e.defaultPrevented before processing item selection.
+                if (e.key === 'Enter' && !open) {
                   e.preventDefault()
-                  onEnter(e)
+                  onEnter?.(e)
                 }
               }}
               placeholder={placeholder}
diff --git a/test/e2e/firewall-rules.e2e.ts b/test/e2e/firewall-rules.e2e.ts
index 5a33c2cdb..6cbc8d155 100644
--- a/test/e2e/firewall-rules.e2e.ts
+++ b/test/e2e/firewall-rules.e2e.ts
@@ -456,10 +456,6 @@ test('can update firewall rule', async ({ page }) => {
   await selectOption(page, 'Protocol filters', 'ICMP')
   await page.getByRole('combobox', { name: 'ICMP Type' }).fill('3')
   await page.getByRole('combobox', { name: 'ICMP Type' }).press('Enter')
-
-  // give FF time to process the above enter before moving to the next field
-  await sleep(300)
-
   await page.getByRole('textbox', { name: 'ICMP Code' }).fill('0')
   await page.getByRole('button', { name: 'Add protocol' }).click()