From 534252c27288c242fad14e47897c975241d493ef 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] 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 bd381daf6a..ff94f79d1a 100644
--- a/packages/canary-react/src/component-tests/IcDateInput/IcDateInput.cy.tsx
+++ b/packages/canary-react/src/component-tests/IcDateInput/IcDateInput.cy.tsx
@@ -300,6 +300,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" }}>