Invalid date not clearing when updated from external source

[jordan-a-young]

🐛 Bug report

Current Behavior

When trying to clear an invalid date, "111" for example, with the setFieldValue function supplied by formik the date displayed does not change.

The error message and internal state are updated, but the displayed value remains the same.

Expected behavior

I expect the date field to have the internal state updated, and show the user a blank field.

Reproducible example

https://stackblitz.com/edit/react-availity-testing-zwwhzb?file=index.js Example created by @nylon22

Suggested solution(s)

We expect the library react-dates to properly handle this situation. The issue could be coming from that library

Additional context

Your environment

  Binaries:
    Node: 12.16.1 - ~/.nvm/versions/node/v12.16.1/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v12.16.1/bin/yarn
    npm: 6.14.5 - ~/.nvm/versions/node/v12.16.1/bin/npm
    Watchman: 4.9.0 - /Users/jyoung/.homebrew/bin/watchman
  npmPackages:
    @availity/analytics: ^1.1.23 => 1.1.23
    @availity/api-axios: ^5.5.9 => 5.5.9
    @availity/api-core: ^6.6.4 => 6.6.4
    @availity/authorizations-core: ^1.0.22 => 1.0.22
    @availity/authorize: ^1.5.18 => 1.5.18
    @availity/breadcrumbs: ^3.1.22 => 3.1.22
    @availity/date: ^1.1.25 => 1.1.26
    @availity/env-var: ^1.11.0 => 1.11.0
    @availity/form: ^0.5.30 => 0.5.31
    @availity/form-upload: ^0.2.23 => 0.2.23
    @availity/hooks: ^1.8.0 => 1.8.0
    @availity/icon: ^0.7.17 => 0.7.17
    @availity/link: ^2.1.17 => 2.1.17
    @availity/localstorage-core: ^3.0.0 => 3.0.0
    @availity/mock-server: ^7.0.12 => 7.0.13
    @availity/page-header: ^10.0.63 => 10.0.66
    @availity/pagination: ^2.9.2 => 2.9.2
    @availity/reactstrap-validation-date: ^3.2.22 => 3.2.22
    @availity/reactstrap-validation-select: ^5.3.27 => 5.3.27
    @availity/select: ^0.15.0 => 0.16.2
    @availity/spaces: ^4.0.25 => 4.0.25
    @availity/training-link: ^1.2.18 => 1.2.18
    @availity/upload: ^2.3.18 => 2.3.18
    @availity/upload-core: 3.2.7 => 3.2.7
    @availity/workflow: ^7.5.21 => 7.5.26
    @availity/yup: ^3.0.7 => 3.0.8

[clintonlunn]

@jordan-a-young

So I kind of stumbled on a workaround for this. Kind of a workaround, but it's a very real problem we've been facing for a while.

If you assign the div a key, you can increment that key and force the component to unmount/remount. In this example, I kept the setFieldValue, but if you pull in handleReset from useFormikContext(), it'll also reset the touched and error states. Definitely open to critiques though!!!

See example here: https://react-availity-testing-ywypxt.stackblitz.io

import React, { useState } from 'react';
import { render } from 'react-dom';
import { Form } from '@availity/form';
import { avDate } from '@availity/yup';
import { Button } from 'reactstrap';
import Date from '@availity/date';
import * as yup from 'yup';
import { useFormikContext } from 'formik';

const FormBody = () => {
  const { setFieldValue } = useFormikContext();
  const [resetKey, setResetKey] = useState(0);

  const clearDateValue = () => {
    setResetKey(resetKey + 1);
    setFieldValue('dateOfService', '');
  };

  return (
    <div key={`form-${resetKey}`}> // <-- new key assigned here
      <Date
        id="dateOfService"
        name="dateOfService"
        min={{ value: 7, units: 'day' }}
        max={{ value: 7, units: 'day' }}
      />
      <Button color="secondary" onClick={clearDateValue} type="button">
        Clear Date Value
      </Button>
      <Button color="primary" type="submit">
        Submit
      </Button>
    </div>
  );
};

const App = () => {
  return (
    <div className="w-100 d-flex flex-row justify-content-around align-items-center">
      <Form
        initialValues={{
          dateOfService: '',
        }}
        onSubmit={(values) => console.log(values)}
        validationSchema={yup.object().shape({
          dateOfService: avDate().required(),
        })}
      >
        <FormBody />
      </Form>
    </div>
  );
};

render(<App />, document.getElementById('root'));