Skip to content

Callback props don't seem to update with state changes #947

Closed
@AlexKDawson

Description

Repro: https://codesandbox.io/s/focus-trap-react-issue-forked-jgei7y?file=/src/App.js

Hello! Thanks for maintaining this library, I just discovered it recently and it's been a huge help. I have however run into this one issue, I believe its a bug but may just be something I'm doing wrong.

In short, when I pass callbacks into the onDeactivate/onPostDeactivate/clickOutsideDeactivates if those callbacks use parent state, the callbacks seem to never be updated past the first render. In general it seems like no updates to the focusTrapOptions trigger a rerender of the FocusTrap at all after initial render. (with the exception of the call to setActive in my example above) but I suspect this is due to active being passed in as its own prop.

For the repo above:

Expected behavior:
num is initialized to 0
The app renders the number 100 after the useEffect is triggered.
Activating then deactivating the Focus Trap should cause the number 100 to be logged as the most recent value of num.

Actual behavior:
num is initialized to 0
The app renders the number 100 after the useEffect is triggered.
Activating then deactivating the Focus Trap logs 0 to the console.

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions