Repository: Sage/carbon (ts)

Issue:
Numeral Date does not submit Form on enter key
### Description

Inside a form, when focused in Numeral Date field, it doesn't submit on enter key. I have asked in the accessibility channel and they say it should follow the usual field in form behaviour. In the Stackblitz template, I think the numeral date component should follow the behaviour of the textbox component on pressing the enter key when in the field, but it does not.

### Reproduction

https://stackblitz.com/edit/parsium-carbon-starter-u4sifn?file=src%2FApp.tsx

### Steps to reproduce

Focus on Numeral Date field (That is inside a form) and press Enter key

### JIRA ticket numbers (Sage only)

_No response_

### Suggested solution

Follow standard component behaviour in forms, submit on enter

### Carbon version

138.2.0

### Design tokens version

4.35.0

### Relevant browsers

Chrome

### Relevant OSs

MacOS

### Additional context

_No response_

### Confidentiality

- [X] I confirm there is no confidential or commercially sensitive information included.

Pull request:
fix(numeral-date): ensure that enter key triggers default behaviour FE-6699
fix #6832

### Proposed behaviour

<!--
A clear and concise description of what changes this PR makes. If applicable, include any UI screenshots to help explain your request. If you are a Sage contributor, please DO NOT share any commercially sensitive information, such as UI screenshots or code from Sage products.
-->
Ensures that when the user presses the `Enter` key the default behaviour is not prevented.

### Current behaviour

<!--
A clear and concise description of the behaviour before this change. If applicable, include any UI screenshots to help explain your request. If you are a Sage contributor, please DO NOT share any commercially sensitive information, such as UI screenshots or code from Sage products.
-->
When the `Enter` key is pressed `preventDefault` is called

### Checklist

<!-- Each PR should include the following -->

- [x] Commits follow our style guide
- [x] Related issues linked in commit messages if required
- [x] Unit tests added or updated if required
- [x] Storybook added or updated if required

#### QA

- [ ] Tested in provided StackBlitz sandbox/Storybook
- [ ] Add new Playwright test coverage if required
- [ ] Carbon implementation matches Design System/designs
- [ ] UI Tests GitHub check reviewed if required

### Additional context

<!-- Add any other context or links about the pull request here. -->

### Testing instructions

<!--
How can a reviewer test this PR?

If this PR addresses a pre-existing bug, please include a link to a sandbox that reproduces the original bug. A starter template has been provided to help you do this:
<https://stackblitz.com/fork/github/Parsium/carbon-starter>
-->
`InForm` test story added to NumeralDate for QA 

Patch:
diff --git a/src/components/numeral-date/numeral-date.component.tsx b/src/components/numeral-date/numeral-date.component.tsx
index 8d8e17d8d..2204a47a4 100644
--- a/src/components/numeral-date/numeral-date.component.tsx
+++ b/src/components/numeral-date/numeral-date.component.tsx
@@ -317,6 +317,7 @@ export const NumeralDate = <DateType extends NumeralDateObject = FullDate>({
     const isValidKey =
       Events.isNumberKey(event) ||
       Events.isTabKey(event) ||
+      Events.isEnterKey(event) ||
       event.key === "Delete" ||
       event.key === "Backspace";
 
diff --git a/src/components/numeral-date/numeral-date.spec.tsx b/src/components/numeral-date/numeral-date.spec.tsx
index 4055350ac..a128b41a9 100644
--- a/src/components/numeral-date/numeral-date.spec.tsx
+++ b/src/components/numeral-date/numeral-date.spec.tsx
@@ -618,6 +618,24 @@ describe("NumeralDate", () => {
       expect(preventDefaultMock).not.toHaveBeenCalled();
     });
 
+    it("allows Enter key presses", () => {
+      const input = wrapper.find("input").at(0);
+      const event = { key: "Enter", preventDefault: preventDefaultMock };
+      act(() => {
+        input.simulate("keydown", event);
+      });
+      expect(preventDefaultMock).not.toHaveBeenCalled();
+    });
+
+    it("allows Tab key presses", () => {
+      const input = wrapper.find("input").at(0);
+      const event = { key: "Tab", preventDefault: preventDefaultMock };
+      act(() => {
+        input.simulate("keydown", event);
+      });
+      expect(preventDefaultMock).not.toHaveBeenCalled();
+    });
+
     it.each([["a"], ["/"]])("does not allow non-numeric characters", (key) => {
       const input = wrapper.find("input").at(0);
       const event = { key: key[0], preventDefault: preventDefaultMock };


Test patch:
diff --git a/src/components/numeral-date/numeral-date-test.stories.tsx b/src/components/numeral-date/numeral-date-test.stories.tsx
index 31b72c4e6..1989cdfec 100644
--- a/src/components/numeral-date/numeral-date-test.stories.tsx
+++ b/src/components/numeral-date/numeral-date-test.stories.tsx
@@ -211,3 +211,15 @@ export const TooltipPosition = () => {
 };
 
 TooltipPosition.storyName = "tooltip position";
+
+export const InForm = () => {
+  return (
+    <form>
+      <NumeralDate dateFormat={["dd", "mm", "yyyy"]} label="Label" />
+      <br />
+      <button type="submit">Submit</button>
+    </form>
+  );
+};
+
+InForm.storyName = "in form";