Skip to content

Bug - DatePicker - onBlur is not called on all field changes #8779

@Chip-L

Description

@Chip-L

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?

  1. Open the CodeSandbox for the DatePicker component: https://o4yftx.csb.app/
  2. Click in the date text field and press Tab (triggers onBlur)
  3. Click on the Calendar Icon
  4. Observe in the Console.log, onBlur message didn’t appear (this is expected because no change)
  5. Select a date on the calendar.
  6. Observe in the Console.log, onChange message appeared, but not onBlur
  7. Click in the date text field and press Tab again
  8. Observe the console shows onBlur message (this is expected and correct)
  9. Delete the date in the text field and press Tab
  10. 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

No type

Projects

Status

Done

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions