Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug - [DatePicker] - [JavaScript error thrown when an invalid date is given] #9721

Closed
jelly opened this issue Oct 9, 2023 · 2 comments · Fixed by #9794
Closed

Bug - [DatePicker] - [JavaScript error thrown when an invalid date is given] #9721

jelly opened this issue Oct 9, 2023 · 2 comments · Fixed by #9794
Assignees
Milestone

Comments

@jelly
Copy link
Contributor

jelly commented Oct 9, 2023

Describe the problem

In Cockpit we have a test where we enter an invalid date into the date picker which leads to no date being selected when opening the datePicker:

image

When I add a breakpoint to the line above of where the exception happens, I noticed the focusTrap basically tries to execute

document.querySelector('.pf-v5-c-calendar-month__dates-cell.pf-m-selected'); 

Which returns null.

I've found out that reverting this commit no longer throws a JavaScript error.

How do you reproduce the problem?

I've had issues with reproducing the problem in a codesandbox, our Datepicker usage is a bit non-trivial.

Expected behavior

A component should never throw an JavaScript exception.

Is this issue blocking you?

Currently we have no workaround, except disabling the test for now.

What is your environment?

  • OS: Linux
  • Browser chrome
  • Version
@jelly
Copy link
Contributor Author

jelly commented Oct 9, 2023

Doing some further debugging, the element to focus on depends on valueDate which for us is an invalid Date object which is truthy so focusSelectorForSelectedDate is selected instead of focusSelectorForCurrentDate

image

@jelly
Copy link
Contributor Author

jelly commented Oct 9, 2023

As we provide our own dateParse which returns an invalid date this goes wrong, while the PF code parses the date using:

dateParse = (val: string) => val.split('-').length === 3 && new Date(`${val}T00:00:00`),

Which is why I couldn't reproduce it in a sandbox. however the PF docs state that dateParse should return a Date and not a date or bool. So that sounds like PF should check if the date is valid or not with for example Number.isNaN(date.valueOf());.

Meanwhile we can change our code to verify if the date is valid and if not return false. That should resolve our JavaScript error.

Offtopic: splitting on - might not be the best solution as that doesn't handle localised date formats like 06/10/2023.

@wise-king-sullyman wise-king-sullyman moved this from Needs triage to Backlog in PatternFly Issues Oct 10, 2023
@wise-king-sullyman wise-king-sullyman moved this from Backlog to Not started in PatternFly Issues Oct 27, 2023
@wise-king-sullyman wise-king-sullyman moved this from Not started to In Progress in PatternFly Issues Nov 1, 2023
@thatblindgeye thatblindgeye moved this from In Progress to PR Review in PatternFly Issues Nov 2, 2023
@github-project-automation github-project-automation bot moved this from PR Review to Done in PatternFly Issues Nov 13, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Archived in project
Development

Successfully merging a pull request may close this issue.

3 participants