Fix bug in DateInput where props.value differs from internal state

Author: Tomdango

src/components/date-input/DateInput.tsx

@@ -17,7 +17,7 @@ type DateInputChangeEvent = ChangeEvent<HTMLInputElement> & {
 
 interface DateInputProps
   extends Omit<HTMLProps<HTMLDivElement>, 'value' | 'defaultValue'>,
-    FormElementProps {
+  FormElementProps {
   autoSelectNext?: boolean;
   value?: Partial<DateInputValue>;
   defaultValue?: Partial<DateInputValue>;
@@ -38,16 +38,47 @@ interface DateInput extends PureComponent<DateInputProps, DateInputState> {
 }
 
 class DateInput extends PureComponent<DateInputProps, DateInputState> {
+  static Day = DayInput;
+
+  static Month = MonthInput;
+
+  static Year = YearInput;
+
   constructor(props: DateInputProps, ...rest: any[]) {
     super(props, ...rest);
     this.state = {
-      values: { day: '', month: '', year: '' },
+      values: {
+        day: props.value?.day || '',
+        month: props.value?.month || '',
+        year: props.value?.year || '',
+      },
     };
 
     this.monthRef = null;
     this.yearRef = null;
   }
 
+  componentDidUpdate(prevProps: DateInputProps) {
+    if (this.props.value && prevProps.value !== this.props.value) {
+      // This is the only way that we can update our internal state
+      // when the value updates. We check if the value has changed first,
+      // preventing an infinite loop.
+      //
+      // eslint-disable-next-line react/no-did-update-set-state
+      this.setState(state => {
+        if (!this.props.value) return state;
+
+        const newState = { ...state };
+        const { day, month, year } = this.props.value;
+        if (day && day !== state.values.day) newState.values.day = day;
+        if (month && month !== state.values.month) newState.values.month = month;
+        if (year && year !== state.values.year) newState.values.year = year;
+
+        return newState;
+      });
+    }
+  }
+
   handleSelectNext = (inputType: 'day' | 'month' | 'year', value: string) => {
     if (!this.props.autoSelectNext) return;
     if (inputType === 'day' && value.length === 2 && this.monthRef) {
@@ -82,11 +113,6 @@ class DateInput extends PureComponent<DateInputProps, DateInputState> {
     if (inputType === 'year') this.yearRef = ref;
   };
 
-  static Day = DayInput;
-
-  static Month = MonthInput;
-
-  static Year = YearInput;
 
   render() {
     const { children, onChange, value, defaultValue, ...rest } = this.props;

stories/FormElementBehaviour/DateInput.stories.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable import/no-extraneous-dependencies */
-import React from 'react';
+import React, { useState } from 'react';
 import { storiesOf } from '@storybook/react';
-import { DateInput, Form } from '../../src';
+import { DateInput } from '../../src';
 
 const stories = storiesOf('FormElementBehaviour: DateInput', module);
 
@@ -90,4 +90,19 @@ stories
         <DateInput hint="Test hint" label="Test label" value={value} />
       </div>
     );
+  })
+  .add('Changeable Controlled Element', () => {
+    const [value, setValue] = useState({ day: '20', month: '09', year: '1996' });
+
+    return (
+      <div style={{ padding: 20 }}>
+        <h5>Component</h5>
+        <DateInput
+          hint="Test hint"
+          label="Test label"
+          value={value}
+          onChange={e => setValue(e.currentTarget.value)}
+        />
+      </div>
+    );
   });