-
Notifications
You must be signed in to change notification settings - Fork 375
Description
Describe the problem
onBlur is only called if a value is entered in the text input. It is important to fire the onBlur event because this also triggers the validation (we can’t catch an empty field that is required) and updates any error messages.
How do you reproduce the problem?
- Open the CodeSandbox for the DatePicker component: https://o4yftx.csb.app/
- Click in the date text field and press
Tab(triggersonBlur) - Click on the Calendar Icon
- Observe in the Console.log, onBlur message didn’t appear (this is expected because no change)
- Select a date on the calendar.
- Observe in the Console.log, onChange message appeared, but not onBlur
- Click in the date text field and press
Tabagain - Observe the console shows onBlur message (this is expected and correct)
- Delete the date in the text field and press
Tab - Observe the console now shows the onChange but not onBlur
Expected behavior
It is expected that onBlur (and any other validator) will be called whenever a value is changed, either by the calendar or by inputting the text.
Is this issue blocking you?
Our workaround is to use a copy of the DatePicker component with the following changes:
• For the change text onBlur is to remove the if(pristine) check.
• For the calendar is change the <Popover>’s props to include onHide={() => onInputBlur(null)}.
Screenshots
N/A
What is your environment?
- OS: Windows 10
- Browser: Chrome, Firefox
- Version: Latest
What is your product and what release date are you targeting?
PMWeb, an insurance actuator product. We do continuous releases.
Any other information?
I believe this issue is a result of the fix for bug #6822 (released in v4.192.4). It looks to me like the value of pristine was changed to mean "is empty" from "is unchanged". The ability to change from a valid date to an empty date without it displaying an error is a valid use case. However, that doesn’t mean we can skip the validation triggered by onBlur. It is also a valid use case to not allow an empty date field.
Metadata
Metadata
Assignees
Labels
Type
Projects
Status