🐞 useIdleTimer hook issue with rerendering and lazy-loaded config options

[jon-cullison]

What happened?

We have a component which instantiates useIdleTimer using a lazy-loaded boolean value for crossTab (we default to false until we finish loading the actual value). The component rerenders when the boolean value has been loaded and may be set to true. If the user takes no action before this rerender, then isLastActiveTab() will always return false, even if there is only one tab.

Reproduction Steps

1. Create a component which accepts a boolean prop and uses the useIdleTimer hook, setting crossTab to the prop value.
2. In the parent component, create a state variable which defaults to false, create a setTimeout which will flip it to true after 100ms, and pass that into the child component in step 1.
3. Add some logging or display the status of isLastActiveTab() in a modal that is shown when `onPrompt` is called.
4. Notice that when refreshing and doing nothing, isLastActiveTab() is false. When refreshing and moving the mouse after the 100ms timeout, isLastActiveTab() is true

Relevant log output

Screenshots or Additional Context

I have created a codesandbox example which reproduces this behavior here:

https://codesandbox.io/p/sandbox/react-idle-timer-repro-2yv78s

IdleTimerContainer.js contains the idle timer, App.js sets and flips the boolean prop as described in the steps above.

Module Version

5.7.2

What browsers are you seeing the problem on? Select all that apply.

Chrome

What devices are you seeing the problem on?

Desktop

Verification

• I have checked for existing closed issues and discussions.

[SupremeTechnopriest]

This is by design since there has been no user activity on the page. You can add load or DOMInteractive to the events array to make idle timer treat those events as activity and it should do what you want.

[jon-cullison]

Thanks for your reply.

I have included all available events in the array in my codebase and this still occurs.

EDIT: I misread the documentation for this and adding load to the events array does produce the behavior I would like.

The reason I thought this may be a bug is that if the value of crossTab is simply set to true on first render and never changed, then isLastActiveTab() will return true even if there has been no user activity.

[SupremeTechnopriest]

Yea sounds like its just a race on the load event. Cross tab boolean is switched on after the event already fires. You could simulate a click event on the document after you flip on cross tab to get an event through.