From 6491a4dbd98683fd2d12b831850c5c6405fe0694 Mon Sep 17 00:00:00 2001
From: GCHQ-Developer-530
 <111882034+GCHQ-Developer-530@users.noreply.github.com>
Date: Fri, 21 Feb 2025 13:36:28 +0000
Subject: [PATCH 1/2] feat(canary-web-components): add the ability to backspace
 through a date input to delete the date

Add the ability to backspace through a date input to delete the date, using moveToPreviousInput
after the last character has been deleted

. #2244
---
 .../src/components/ic-date-input/ic-date-input.tsx          | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/canary-web-components/src/components/ic-date-input/ic-date-input.tsx b/packages/canary-web-components/src/components/ic-date-input/ic-date-input.tsx
index 7a951ca008..9b9c0da766 100644
--- a/packages/canary-web-components/src/components/ic-date-input/ic-date-input.tsx
+++ b/packages/canary-web-components/src/components/ic-date-input/ic-date-input.tsx
@@ -605,6 +605,12 @@ export class DateInput {
         this.preventAutoFormatting = true;
         this.handleUpDownArrowKeyPress(input, event);
         break;
+      case "backspace":
+        if (input.value.length === 0) {
+          event.preventDefault();
+          this.moveToPreviousInput(input);
+        }
+        break;
       default:
         break;
     }

From e9e2ac59936febaea08fd9852a15a50681728fc5 Mon Sep 17 00:00:00 2001
From: GCHQ-Developer-530
 <111882034+GCHQ-Developer-530@users.noreply.github.com>
Date: Fri, 21 Feb 2025 14:00:11 +0000
Subject: [PATCH 2/2] feat(canary-react): add the ability to backspace through
 a date input to delete the date

Add the ability to backspace through a date input to delete the date, using moveToPreviousInput
after the last character has been deleted

. #2244
---
 .../IcDateInput/IcDateInput.cy.tsx            | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/packages/canary-react/src/component-tests/IcDateInput/IcDateInput.cy.tsx b/packages/canary-react/src/component-tests/IcDateInput/IcDateInput.cy.tsx
index 932a961c0f..ca109d38d6 100644
--- a/packages/canary-react/src/component-tests/IcDateInput/IcDateInput.cy.tsx
+++ b/packages/canary-react/src/component-tests/IcDateInput/IcDateInput.cy.tsx
@@ -319,6 +319,30 @@ describe("IcDateInput end-to-end, visual regression and a11y tests", () => {
     cy.findShadowEl(DATE_INPUT, YEAR_INPUT_ARIA_LABEL).should(HAVE_VALUE, "");
   });
 
+  it("should test deleting the date using backspace", () => {
+    mount(<IcDateInput label="Test Label" />);
+
+    cy.checkHydrated(DATE_INPUT);
+
+    cy.findShadowEl(DATE_INPUT, DAY_INPUT_ARIA_LABEL).type("30");
+    cy.findShadowEl(DATE_INPUT, MONTH_INPUT_ARIA_LABEL).type("04");
+    cy.findShadowEl(DATE_INPUT, YEAR_INPUT_ARIA_LABEL).type("2000");
+
+    cy.findShadowEl(DATE_INPUT, YEAR_INPUT_ARIA_LABEL).type(
+      "{Backspace}{Backspace}{Backspace}{Backspace}"
+    );
+    cy.findShadowEl(DATE_INPUT, MONTH_INPUT_ARIA_LABEL).type(
+      "{Backspace}{Backspace}"
+    );
+    cy.findShadowEl(DATE_INPUT, DAY_INPUT_ARIA_LABEL).type(
+      "{Backspace}{Backspace}"
+    );
+
+    cy.findShadowEl(DATE_INPUT, DAY_INPUT_ARIA_LABEL).should(HAVE_VALUE, "");
+    cy.findShadowEl(DATE_INPUT, MONTH_INPUT_ARIA_LABEL).should(HAVE_VALUE, "");
+    cy.findShadowEl(DATE_INPUT, YEAR_INPUT_ARIA_LABEL).should(HAVE_VALUE, "");
+  });
+
   it("should enter complete date and check for accessibility", () => {
     mount(
       <div style={{ padding: "10px" }}>