Prevent the sidemodal form from immediately erroring when using the action menu (#2617)

* prevent event bubbling when the enter key is hit to select a menu item in the action menu

* Add test

* Move ActionMenu tests to dedicated file

* Use a more universal check for the openActionMenu helper

Author: charliepark

app/ui/lib/ActionMenu.tsx

@@ -99,6 +99,7 @@ export function ActionMenu(props: ActionMenuProps) {
               if (e.key === KEYS.enter) {
                 if (selectedItem) {
                   selectedItem.onSelect()
+                  e.preventDefault()
                   onDismiss()
                 }
               } else if (e.key === KEYS.down) {

test/e2e/action-menu.e2e.ts

@@ -0,0 +1,29 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+import { expect, test, type Page } from '@playwright/test'
+
+import { expectNotVisible } from './utils'
+
+const openActionMenu = async (page: Page) => {
+  // open the action menu (use the sidenav button, as keyboard events aren't reliable in Playwright)
+  await page.getByRole('button', { name: 'JUMP TO' }).click()
+  // make sure the action menu modal is visible
+  await expect(page.getByText('Enterto submit')).toBeVisible()
+}
+
+test('Ensure that the Enter key in the ActionMenu doesn’t prematurely submit a linked form', async ({
+  page,
+}) => {
+  await page.goto('/system/silos')
+  await openActionMenu(page)
+  // "New silo" is the first item in the list, so we can just hit enter to open the modal
+  await page.keyboard.press('Enter')
+  await expect(page.getByRole('dialog', { name: 'Create silo' })).toBeVisible()
+  // make sure error text is not visible
+  await expectNotVisible(page, [page.getByText('Name is required')])
+})