Conditionally rendering FocusTrap causes immediate deactivation with Strict Mode

This doesn’t appear to be quite the same issue as #720 or #738. Using v10.0.0.

I have a modal component that only renders itself when active, and as part of this modal component I use FocusTrap. When in Strict Mode, opening the modal causes onDeactivate and/or onPostDeactivate to get called immediately.

The focus trap works perfectly fine either without Strict Mode or without being conditionally rendered.

Here’s a barebones CodeSandbox demo of the problem.

[scatterfish]

I’m honestly convinced now that how it currently behaves is the correct behavior, and that relying on using onDeactivate for side-effecting code is the user’s problem. All the documentation really needs is a large bold warning about it, maybe some suggestions for how to deal with it, and definitely the rationale behind it so that it doesn’t take people by surprise.

If my guess about the unexpected behavior I mentioned above is in fact due to the Strict Mode-specific mitigations already in place, then truthfully trying to muck with things more than they already have will do more harm than good.

[scatterfish]

Hmm, I don’t think we’re talking about the same thing. I linked a fork of your sandbox where if (props.isOpen) is now if (props.isOpen || true) and it still works in strict mode. Note that props.isOpen remains false until the button is clicked, though, which means the trap remains inactive because it’s controlled by active={props.isOpen}, hence it doesn’t activate, and doesn’t get re-activated after the unmount/remount caused by strict mode, and so the handler isn’t called.

Ah, that’s my mistake, I had forgotten about that. Makes sense. To be clear, I wasn’t saying before that the modal didn’t work, just that the onDeactivate wasn’t being called when the app loads, which is now explained by this.