Repository: gpbl/react-day-picker (ts)

Issue:
DayPickerInput: input value does not update when the locale changes
Basically when the "dayPickerProps.locale" or "format" props change 
the value of the input component does not get recomputed  (call formatDate)


Pull request:
Fix DayPickerInput value does not recompute on locale change
on DayPickerInput:

when the "dayPickerProps.locale" or "format" props change
the value of the input should be recomputed

Fixes #938

Patch:
diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml
new file mode 100644
index 000000000..3c07b0cb1
--- /dev/null
+++ b/.github/workflows/nodejs.yml
@@ -0,0 +1,39 @@
+name: Node CI
+
+on:
+  pull_request:
+    branches:
+    - next
+  push:
+    branches:
+      - master
+      - next
+        
+jobs:
+
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [12.x]
+
+    steps:
+    - uses: actions/checkout@v1
+    - name: Deploy Logs
+      uses: bdougie/loglify@master
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - name: Install dependencies
+      run: yarn install
+    - name: Lint source
+      run: |
+        yarn lint
+        yarn lint-types
+    - name: Build
+      run: yarn build
+
+      env:
+        CI: true
diff --git a/docs/src/pages/api/DayPickerInput.js b/docs/src/pages/api/DayPickerInput.js
index f236f1483..45a369bbb 100644
--- a/docs/src/pages/api/DayPickerInput.js
+++ b/docs/src/pages/api/DayPickerInput.js
@@ -192,7 +192,7 @@ import { DayPickerInput } from 'react-day-picker';
 
 function OverlayComponent({ children, ...props }) {
   return (
-    <div {...props}}>
+    <div {...props}>
       <p>My custom things</p>
       /* include the calendar */
       { children }
diff --git a/src/DayPickerInput.js b/src/DayPickerInput.js
index 85cacf810..2cf7659c7 100644
--- a/src/DayPickerInput.js
+++ b/src/DayPickerInput.js
@@ -183,8 +183,13 @@ export default class DayPickerInput extends React.Component {
     // Current props
     const { value, formatDate, format, dayPickerProps } = this.props;
 
-    // Update the input value if the `value` prop has changed
-    if (value !== prevProps.value) {
+    // Update the input value if `value`, `dayPickerProps.locale` or `format`
+    // props have changed
+    if (
+      value !== prevProps.value ||
+      dayPickerProps.locale !== prevProps.dayPickerProps.locale ||
+      format !== prevProps.format
+    ) {
       if (isDate(value)) {
         newState.value = formatDate(value, format, dayPickerProps.locale);
       } else {
@@ -334,7 +339,10 @@ export default class DayPickerInput extends React.Component {
     if (!this.props.hideOnDayClick) {
       return;
     }
-    this.hideTimeout = setTimeout(() => this.hideDayPicker(), HIDE_TIMEOUT);
+    this.hideTimeout = setTimeout(() => {
+      this.overlayHasFocus = false;
+      this.hideDayPicker();
+    }, HIDE_TIMEOUT);
   }
 
   handleInputClick(e) {


Test patch:
diff --git a/test/daypickerinput/rendering.js b/test/daypickerinput/rendering.js
index 754863008..a10b58339 100644
--- a/test/daypickerinput/rendering.js
+++ b/test/daypickerinput/rendering.js
@@ -149,6 +149,40 @@ describe('DayPickerInput', () => {
       wrapper.setProps({ value: '01/10/2018' });
       expect(wrapper.instance().state.value).toBe('01/10/2018');
     });
+    it('should update the current value when `dayPickerProps.locale` changes', () => {
+      const date = new Date(2019, 8, 30);
+      const formatDate = (d, _format, _locale) => {
+        const year = d.getFullYear();
+        const month = `${d.getMonth() + 1}`;
+        const day = `${d.getDate()}`;
+        return `${year}-${month}-${day} ${_locale}`;
+      };
+      const wrapper = mount(
+        <DayPickerInput value={date} formatDate={formatDate} />
+      );
+      wrapper.setProps({ dayPickerProps: { locale: 'en' }, formatDate });
+      expect(wrapper.instance().state.value).toBe('2019-9-30 en');
+
+      wrapper.setProps({ dayPickerProps: { locale: 'es' }, formatDate });
+      expect(wrapper.instance().state.value).toBe('2019-9-30 es');
+    });
+    it('should update the current value when `format` changes', () => {
+      const date = new Date(2019, 8, 30);
+      const formatDate = (d, _format) => {
+        const year = d.getFullYear();
+        const month = `${d.getMonth() + 1}`;
+        const day = `${d.getDate()}`;
+        return `${year}-${month}-${day} ${_format}`;
+      };
+      const wrapper = mount(
+        <DayPickerInput value={date} formatDate={formatDate} />
+      );
+      wrapper.setProps({ format: 'YYYY-M-D', formatDate });
+      expect(wrapper.instance().state.value).toBe('2019-9-30 YYYY-M-D');
+
+      wrapper.setProps({ format: 'YYYY-MM-DD', formatDate });
+      expect(wrapper.instance().state.value).toBe('2019-9-30 YYYY-MM-DD');
+    });
     it('should not update the current value when other props are updated', () => {
       const wrapper = mount(<DayPickerInput value="2017-12-15" />);
       wrapper.setProps({ dayPickerProps: {} });