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(DatePicker): Fix compatibility with strict mode #3964

Merged
merged 2 commits into from
Nov 22, 2024

Conversation

jpveooys
Copy link
Collaborator

@jpveooys jpveooys commented Nov 22, 2024

Related issue

#3528

Overview

This:

  • updates focus-trap and focus-trap-react to fix findDOMNode deprecation warnings from React
  • makes DatePicker work in strict mode

Reason

Strict mode should be supported. (Previously the day picker would not open when strict mode is on.)

Work carried out

  • Update focus-trap and react-focus-trap
  • Use clickOutsideDeactivates and escapeDeactivates focus-trap callbacks instead of onDeactivate
  • Remove DATEPICKER_ACTION.TOGGLE_OPEN reducer action (as reducer functions are called twice in strict mode)

Developer notes

See https://github.com/focus-trap/focus-trap-react?tab=readme-ov-file#%EF%B8%8F%EF%B8%8F-react-18-strict-mode-%EF%B8%8F%EF%B8%8F for the react-focus-trap node about strict mode – onDeactivate wasn't really the right callback as it gets called when the component is unmounted.

Strict mode is still disabled in Storybook as there were some other unrelated failures with it on (mainly in the form usage examples).

@jpveooys jpveooys added Type: Bug Inconsistencies or issues which have caused a problem for users or implementors Package: react-component-library Package/code type labels Nov 22, 2024
Copy link

netlify bot commented Nov 22, 2024

Deploy Preview for storybook-navy-digital-mod-uk ready!

Name Link
🔨 Latest commit b5c1b3f
🔍 Latest deploy log https://app.netlify.com/sites/storybook-navy-digital-mod-uk/deploys/6740584bd2f53c00096d0d8e
😎 Deploy Preview https://deploy-preview-3964--storybook-navy-digital-mod-uk.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 configuration.

This updates focus-trap and focus-trap-react to fix findDOMNode deprecation warnings from React.
This stops using the onDeactivate callback in focus-trap due to its incompatibility with strict mode: https://github.com/focus-trap/focus-trap-react?tab=readme-ov-file#%EF%B8%8F%EF%B8%8F-react-18-strict-mode-%EF%B8%8F%EF%B8%8F

Instead, the click and escape callbacks are used.

Additionally, the DATEPICKER_ACTION.TOGGLE_OPEN reducer action was removed as the reduce functions are called twice when strict mode is enabled, so that action doesn't work as expected.

Strict mode hasn't been enabled in Storybook as there seemed to be some unrelated end-to-end tests still failing with it enabled.
@jpveooys jpveooys force-pushed the fix/date-picker-strict-mode branch from effb893 to b5c1b3f Compare November 22, 2024 10:09
@jpveooys jpveooys marked this pull request as ready for review November 22, 2024 10:18
Copy link
Collaborator

@m7kvqbe1 m7kvqbe1 left a comment

Choose a reason for hiding this comment

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

Looks good! Legendary stuff!

@jpveooys jpveooys merged commit 6101069 into master Nov 22, 2024
23 checks passed
@jpveooys jpveooys deleted the fix/date-picker-strict-mode branch November 22, 2024 10:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Package: react-component-library Package/code type Type: Bug Inconsistencies or issues which have caused a problem for users or implementors
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants