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

fix(date-picker): correct deleted end range behavior #13108

Conversation

francinelucca
Copy link
Collaborator

@francinelucca francinelucca commented Feb 6, 2023

Closes #12734

Prevents end date from being deleted on datepicker change when user has not made changes to input.

Changelog

Changed

  • packages/react/src/components/DatePicker/DatePicker.js: extend onChange behavior to prevent end date being deleted

Testing / Reviewing

  1. Tab to the Range Datepicker
  2. Type a valid date into the "Start Date"
  3. Press tab (focus now moves to the "End Date" and keeps the start date)
  4. Type a valid date into the "End Date"
  5. Tab back to Start Date (shift + tab) -- you'll have to do it twice to get to the start date, see note below
  6. Tab again to End Date (Tab)

You should still see both previously selected dates displayed in the calendar. Compare to react.carbondesignsystem.com where date gets deleted

Note

There's a "double focus" issue when tabbing off the end date after changing it manually and not pressing "enter" to trigger the change, I paired up with Taylor on this and we're fine with this behavior for now until flatpickr gets more stable upstream or we switch into a different implementation

@francinelucca francinelucca self-assigned this Feb 6, 2023
@francinelucca francinelucca changed the title fix(date-picker): correct deleted end range behavior WIP: fix(date-picker): correct deleted end range behavior Feb 6, 2023
@netlify
Copy link

netlify bot commented Feb 6, 2023

Deploy Preview for carbon-components-react ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit c687c06
🔍 Latest deploy log https://app.netlify.com/sites/carbon-components-react/deploys/63e682e70b76e000083584f4
😎 Deploy Preview https://deploy-preview-13108--carbon-components-react.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@netlify
Copy link

netlify bot commented Feb 6, 2023

Deploy Preview for carbon-elements ready!

Name Link
🔨 Latest commit c687c06
🔍 Latest deploy log https://app.netlify.com/sites/carbon-elements/deploys/63e682e7afec1400087da41a
😎 Deploy Preview https://deploy-preview-13108--carbon-elements.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

Copy link
Member

@tay1orjones tay1orjones left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for tackling this one! Looks great - the double focus issue is much less of a concern compared to the original bug. I think we can merge this even with that slight remaining nit and circle back to it if necessary.

@tay1orjones tay1orjones changed the title WIP: fix(date-picker): correct deleted end range behavior fix(date-picker): correct deleted end range behavior Feb 9, 2023
Copy link
Member

@tw15egan tw15egan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is working as expected! 🎉 ✅ 👍🏻

@kodiakhq kodiakhq bot merged commit 7c8ef1a into carbon-design-system:main Feb 10, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[a11y]: DatePicker range variety - clears start date after tabbing off end date
3 participants