CUI-5: Prevent implicit form submission on Enter for non-text elements

src/lib/components/form/Form.component.tsx

@@ -279,7 +279,12 @@ const PageForm = forwardRef<HTMLFormElement, PageFormProps>(
     const requireMode = useContext(RequireModeContext);
     return (
       <ScrollbarWrapper>
-        <StyledForm {...formProps} noValidate ref={ref} layout={layout}>
+        <StyledForm
+          {...formProps}
+          noValidate
+          ref={ref}
+          layout={layout}
+        >
           <FixedHeader layoutKind="page">
             <PaddedForHeaderAndFooterContent>
               <Wrap>
@@ -343,7 +348,11 @@ const TabForm = forwardRef<HTMLFormElement, TabFormProps>(
   ({ leftActions, rightActions, children, banner, ...formProps }, ref) => {
     return (
       <ScrollbarWrapper>
-        <StyledForm {...formProps} noValidate ref={ref}>
+        <StyledForm
+          {...formProps}
+          noValidate
+          ref={ref}
+        >
           <FixedHeader layoutKind="tab">
             <Wrap>
               <div>{leftActions}</div>

src/lib/components/form/Form.test.tsx

@@ -0,0 +1,33 @@
+import { act, screen, render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import { Form, FormSection, FormGroup } from './Form.component';
+
+describe('Form', () => {
+  it('should submit when pressing Enter on a text input', async () => {
+    const onSubmit = jest.fn((e) => e.preventDefault());
+    render(
+      <Form
+        layout={{ kind: 'page', title: 'Test Form' }}
+        onSubmit={onSubmit}
+        rightActions={
+          <button type="submit">Submit</button>
+        }
+      >
+        <FormSection>
+          <FormGroup
+            id="text-field"
+            label="Name"
+            content={<input type="text" id="text-field" />}
+          />
+        </FormSection>
+      </Form>,
+    );
+
+    const input = screen.getByRole('textbox');
+    await act(() => userEvent.click(input));
+    await act(() => userEvent.keyboard('{Enter}'));
+
+    expect(onSubmit).toHaveBeenCalled();
+  });
+});

src/lib/components/selectv2/Selectv2.component.tsx

@@ -503,7 +503,12 @@ function SelectBox<
 
   return (
     <ScrollbarWrapper>
-      <>
+      <div
+        style={{ display: 'contents' }}
+        onKeyDown={(event) => {
+          if (event.key === 'Enter') event.preventDefault();
+        }}
+      >
         {options && (
           <SelectStyle
             inputId={id}
@@ -558,7 +563,7 @@ function SelectBox<
             {...rest}
           />
         )}
-      </>
+      </div>
     </ScrollbarWrapper>
   );
 }

src/lib/components/selectv2/selectv2.test.tsx

@@ -220,6 +220,41 @@ describe('SelectV2', () => {
     expect(select).toHaveTextContent('Item 1');
   });
 
+  it('should not trigger implicit form submission when Enter is pressed on a closed Select', async () => {
+    const onSubmit = jest.fn((e) => e.preventDefault());
+    render(
+      <form onSubmit={onSubmit}>
+        <SelectWrapper />
+        <button type="submit">Submit</button>
+      </form>,
+    );
+    await waitFor(() => screen.queryAllByRole('img', { hidden: true }));
+
+    userEvent.tab();
+    await act(() => userEvent.keyboard('{Enter}'));
+
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
+
+  it('should not trigger implicit form submission when Enter is pressed on a searchable Select', async () => {
+    const onSubmit = jest.fn((e) => e.preventDefault());
+    render(
+      <form onSubmit={onSubmit}>
+        <SelectWrapper>{optionsWithScrollSearchBar}</SelectWrapper>
+        <button type="submit">Submit</button>
+      </form>,
+    );
+    await waitFor(() => screen.queryAllByRole('img', { hidden: true }));
+
+    const select = selectors.select(true);
+    await act(() => userEvent.click(select));
+    const input = selectors.input();
+    await act(() => userEvent.type(input, 'Item 9'));
+    await act(() => userEvent.keyboard('{Enter}'));
+
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
+
   it('should scroll to selected value when opening select', async () => {
     render(
       <SelectWrapper value={optionsWithScrollSearchBar[9].props.value}>