Merge pull request #3239 from mi6/2244-ic-date-input-improve-deletion…

…-of-full-date-via-keyboard 2244 ic date input improve deletion of full date via keyboard
mi6 · Feb 24, 2025 · aea384c · aea384c
2 parents 6a3c149 + 534252c
commit aea384c
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
@@ -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" }}>

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
@@ -600,6 +600,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;
     }