Do not throw error if input value was cleared symbol by symbol (#1160)

mui · Jul 5, 2019 · 890af28 · 890af28
1 parent 634bf87
commit 890af28
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 11 deletions.
diff --git a/e2e/integration/DatePicker.spec.ts b/e2e/integration/DatePicker.spec.ts
@@ -57,13 +57,27 @@ describe('DatePicker', () => {
     cy.get(`input${ids.clearable}`).should('have.value', '');
   });
 
-  it('Should not accept invalid date format', () => {
-    cy.get(ids.maskedKeyboard)
-      .clear()
-      .type('01');
-    cy.get(`${ids.maskedKeyboard}-helper-text`).should('have.text', 'Invalid Date Format');
+  context('Masked input', () => {
+    it('Should not accept invalid date format', () => {
+      cy.get(ids.maskedKeyboard)
+        .clear()
+        .type('01');
+      cy.get(`${ids.maskedKeyboard}-helper-text`).should('have.text', 'Invalid Date Format');
+
+      cy.get(ids.maskedKeyboard).clear();
+    });
+
+    it('Should clear mask input when removing all text', () => {
+      cy.get(ids.maskedKeyboard).clear();
+
+      cy.get(`${ids.maskedKeyboard}-helper-text`).should('not.be.visible');
+    });
+
+    it('Should clear mask input when removing symbols one by one', () => {
+      cy.get(ids.maskedKeyboard).type('1{backspace}');
 
-    cy.get(ids.maskedKeyboard).clear();
+      cy.get(`${ids.maskedKeyboard}-helper-text`).should('not.be.visible');
+    });
   });
 
   it('Should accept date entered from keyboard', () => {

diff --git a/lib/src/_shared/KeyboardDateInput.tsx b/lib/src/_shared/KeyboardDateInput.tsx
@@ -11,7 +11,7 @@ import { makeMaskFromFormat, maskedDateFormatter } from '../_helpers/text-field-
 export interface KeyboardDateInputProps
   extends ExtendMui<BaseTextFieldProps, 'variant' | 'onError' | 'onChange' | 'value'> {
   format: string;
-  onChange: (value: string) => void;
+  onChange: (value: string | null) => void;
   onClick?: () => void;
   validationError?: React.ReactNode;
   inputValue: string;
@@ -79,10 +79,15 @@ const KeyboardDateInput: React.FunctionComponent<KeyboardDateInputProps> = ({
   const position =
     InputAdornmentProps && InputAdornmentProps.position ? InputAdornmentProps.position : 'end';
 
+  const handleChange = (text: string) => {
+    const finalString = text === '' || text === inputMask ? null : text;
+    onChange(finalString);
+  };
+
   return (
     <Rifm
       value={inputValue}
-      onChange={onChange}
+      onChange={handleChange}
       refuse={refuse}
       format={rifmFormatter || formatter}
     >

diff --git a/lib/src/_shared/hooks/useKeyboardPickerState.ts b/lib/src/_shared/hooks/useKeyboardPickerState.ts
@@ -54,9 +54,9 @@ export function useKeyboardPickerState(props: BaseKeyboardPickerProps, options:
       ...innerInputProps, // reuse validation and open/close logic
       format: wrapperProps.format,
       inputValue: inputValue || innerInputValue,
-      onChange: (value: string) => {
-        setInnerInputValue(value);
-        const date = value === '' ? null : utils.parse(value, wrapperProps.format);
+      onChange: (value: string | null) => {
+        setInnerInputValue(value || '');
+        const date = value === null ? null : utils.parse(value, wrapperProps.format);
 
         onChange(date, value);
       },