Merge pull request #3249 from mi6/cherry-pick-2244-date-input-full-da…

…te-deletion Cherry pick 2244 date input full date deletion
mi6 · Feb 24, 2025 · e08fa20 · e08fa20
2 parents 9a92092 + e9e2ac5
commit e08fa20
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 0 deletions.
diff --git 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" }}>

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
@@ -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;
     }