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

[#720] Add strict mode compatibility #721

Merged
merged 1 commit into from Jun 18, 2022
Merged

[#720] Add strict mode compatibility #721

merged 1 commit into from Jun 18, 2022

Conversation

stefcameron
Copy link
Member

Fixes #720

In React strict mode, the trap gets immediately unmounted and remounted after
first mount. The trap deactivates automatically on unmount, so on remount,
we try to restore the trap to its previous active/paused state based on
the component's existing state.

React does not re-render the component, nor does it call callback refs
again, so we have no choice but to assume the DOM hasn't changed and
the existing trap's container elements are still in the DOM...

Way to go React for strict mode violating the assumption of
componentWillUnmount(), "Once a component is unmounted, it will
never be mounted again." Not a fan.

Also bumped react-dom to 18.2.0 since react was already there, and
set NODE_ENV for different builds.

PR Checklist

Please leave this checklist in your PR.

  • Issue being fixed is referenced.
  • Source changes maintain:
    • Stated browser compatibility.
    • Stated React compatibility.
  • Unit test coverage added/updated.
  • E2E test coverage added/updated.
  • Prop-types added/updated.
  • Typings added/updated.
  • Changes do not break SSR:
    • Careful to test typeof document/window !== 'undefined' before using it in code that gets executed on load.
  • README updated (API changes, instructions, etc.).
  • Changes to dependencies explained.
  • Changeset added (run yarn changeset locally to add one, and follow the prompts).
    • EXCEPTION: A Changeset is not required if the change does not affect any of the source files that produce the package bundle. For example, demo changes, tooling changes, test updates, or a new dev-only dependency to run tests more efficiently should not have a Changeset since it will not affect package consumers.

Fixes #720

In React strict mode, the trap gets immediately unmounted and remounted after
first mount. The trap deactivates automatically on unmount, so on remount,
we try to restore the trap to its previous active/paused state based on
the component's existing state.

React does not re-render the component, nor does it call callback refs
again, so we have no choice but to assume the DOM hasn't changed and
the existing trap's container elements are still in the DOM...

Way to go React for strict mode violating the assumption of
`componentWillUnmount()`, "Once a component is unmounted, it will
never be mounted again." Not a fan.

Also bumped react-dom to 18.2.0 since react was already there, and
set NODE_ENV for different builds.
@changeset-bot
Copy link

changeset-bot bot commented Jun 18, 2022

🦋 Changeset detected

Latest commit: 6d2c92c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
focus-trap-react Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@codecov
Copy link

codecov bot commented Jun 18, 2022

Codecov Report

Merging #721 (6d2c92c) into master (8beb07e) will decrease coverage by 2.34%.
The diff coverage is 33.33%.

@@            Coverage Diff             @@
##           master     #721      +/-   ##
==========================================
- Coverage   92.66%   90.32%   -2.35%     
==========================================
  Files           1        1              
  Lines         150      155       +5     
  Branches       65       68       +3     
==========================================
+ Hits          139      140       +1     
- Misses         11       13       +2     
- Partials        0        2       +2     
Impacted Files Coverage Δ
src/focus-trap-react.js 90.32% <33.33%> (-2.35%) ⬇️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 8beb07e...6d2c92c. Read the comment docs.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Focus trap doesn't work in React 18
1 participant