availity-react icon indicating copy to clipboard operation
availity-react copied to clipboard

Refactor availity/date components to behave like availity/form fields (run validation rules for onBlur events)

Open codecamjam opened this issue 1 year ago • 0 comments

🚀 Feature request

Current Behavior

Suppose you have a form built with the availity/form package. Inside the form body, suppose you have a Field component from availity/form and a DateField component from availity/date. If you focus on the Field component and then remove focus, all validation rules in the yup schema are triggered. However, if you focus on the DateField and then remove focus, none of the validation rules in the yup schema are triggered.

Desired Behavior

It would be nice if the DateField and DateRangeField components would trigger all yup validation rules just like how the availity/form Field component automatically triggers yup validation rules when focus is lost.

Suggested Solution

N/A

Who does this impact? Who is this for?

Anyone using availity/date components inside a form built with availity/form that would like all their validation rules to run when any field loses focus.

Describe alternatives you've considered

The availity/date components do have prop support for onChange and onPickerFocusChange. However, this often requires complex logic in conjunction with useFormikContext or other imperative solutions such as form refs.

Additional context

N/A

codecamjam avatar Nov 02 '22 18:11 codecamjam