feat(DateInput): revert last valid value on blur

8base · Nov 23, 2018 · 9f6c676 · 9f6c676
1 parent e0d50cd
commit 9f6c676
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/src/atoms/dataEntry/DateInput/DateInput.js b/src/atoms/dataEntry/DateInput/DateInput.js
@@ -75,6 +75,17 @@ class DateInput extends React.Component<DateInputProps, DateInputState> {
     }
   };
 
+  onBlur = () => {
+    const { withTime } = this.props;
+    const { textValue } = this.state;
+
+    const luxonValue = utils.fromViewFormatToLuxon(textValue, withTime);
+
+    if (luxonValue && !luxonValue.isValid) {
+      this.setState({ textValue: utils.fromISOToViewFormat(this.props.value, withTime) });
+    }
+  }
+
   onChangeDate = (selected: Date) => {
     const { withTime, value } = this.props;
 
@@ -132,7 +143,7 @@ class DateInput extends React.Component<DateInputProps, DateInputState> {
         { ...rest }
       >
         <Dropdown.Head onClick={ this.open }>
-          <DateInputValue mask={ mask } value={ textValue } onChange={ this.onChangeText } />
+          <DateInputValue mask={ mask } value={ textValue } onChange={ this.onChangeText } onBlur={ this.onBlur } />
         </Dropdown.Head>
         <Dropdown.Body withPortal preventOverflow>
           <DatePicker { ...collectedProps } />

diff --git a/src/atoms/dataEntry/DateInput/DateInputValue.js b/src/atoms/dataEntry/DateInput/DateInputValue.js
@@ -7,6 +7,7 @@ import { Input } from '../Input';
 
 type DateInputValueProps = {|
   onChange: (value: Object) => void,
+  onBlur: () => void,
   value: ?string,
   mask: string,
 |};