react-idle-timer: Idle timer not starting with crossTab without a usr mouse/keyboard event

Sorry work is a little busy at the moment. Its going to be a little bit before I can do another pass on Idle Timer. I will reopen this so its tracked.

hi @SupremeTechnopriest first of all thanks for the awesome module. However I’m facing the issue in my project and I guess it’s same what @ahayden-lg had faced above. I’m using it with next Js below is my config and methods

• OS: Windows
• react-idle-timer: 5.7.2
• next: 12.3.1

const [userStatus, setUserStatus] = useState('');

const onPresenceChange = (presence: any) => {
    // Handle state changes in one function
    console.log('presence ===>>', presence);
    setUserStatus(presence.type);
  };

  const onIdle = () => {
    // Close Modal Prompt
    // Do some idle action like log out your user
    console.log('onIdle ===>>');
  };

  const onActive = () => {
    // Close Modal Prompt
    // Do some active action
    console.log('onActive ===>>');
  };

  const onAction = () => {
    // Do something when a user triggers a watched event
    // reset();
    console.log('onAction ===>>');
  };

  const { start, reset, getIdleTime, getRemainingTime } = useIdleTimer({
    onPresenceChange,
    onIdle,
    onActive,
    onAction,
    timeout: 10000,
    startOnMount: false,
    startManually: true,
    eventsThrottle: 500,
    events: [
      // 'mousemove',
      'keydown',
      'wheel',
      'DOMMouseScroll',
      'mousewheel',
      'mousedown',
      'touchstart',
      'touchmove',
      'MSPointerDown',
      'MSPointerMove',
      'visibilitychange',
      'focus',
    ],
  });

  useEffect(() => {
    console.log('USEEFFECT start ===>>');
    start();
  }, []);

  useEffect(() => {
    console.log('userStatus ===>>', userStatus);
    if (userStatus === 'active') reset();
  }, [userStatus]);

  useEffect(() => {
    const interval = setInterval(() => {
      console.log(
        'getIdleTime()',
        Math.ceil(getIdleTime() / 1000),
        'getRemainingTime()',
        Math.ceil(getRemainingTime() / 1000),
      );
    }, 1000);

    return () => {
      clearInterval(interval);
    };
  });

now issue is when ever I’m trying to exclude the event mousemove onIdle does not trigger not only onIdle but also the onPresenceChange as well unless done any action like clicking through the mouse (since move event is off) or any keypress.

The behavior is quite weird let me know If I’m doing anything wrong, I did a lot of head scratching but unable to resolve the issue.

Sure no problem. Im just having a hard time understanding why that would be. All calling reset would do is recreate the timer and fire an onActive event. The start method is called automatically as long as startOnMount is not false and startManually is not true.

Inside the IdleTimer.componentDidUpdate I check for idle and an updated timeout prop and call reset() automatically:

    if (prevProps.timeout !== this.props.timeout) {
      if (this.state.idle) this.reset()
    }

So I’m landing on something inside your onActive handler is doing something to the IdleTimer component instance. But all you have is a log there? Im kind of at a loss. Maybe if someone else hits this issue we can get some more information to figure out why this happens.

Im going to close this issue for now and release 4.6.1 to the latest tag. It has some good bug fixes and improvements that should get out asap.

Thanks for the detailed breakdown! I will get into it tomorrow.

I create a sample app with create-react-app and also installed the next release with yarn upgrade react-idle-timer@next.

App.js

function App() {
  return (
    <div className="App">
      <h2>TESTING IDLE TIMER</h2>
      <IdleTimeoutComp></IdleTimeoutComp>
    </div>
  );
}

IdleTimeout.js

import React from 'react';
import IdleTimer from 'react-idle-timer';

class IdleTimeout extends React.Component {
  state = {
    timeoutValue: (7 * 1000),
    timerActionText: "No action events.",
    timerActiveText: "onActive not triggered.",
    timerIdleText: "onIdle not triggered.",
  };
  idleTimer = null;

  onAction = () => {
    let timeoutSecs = this.state.timeoutValue / 1000;
    let remainingSecs = this.idleTimer.getRemainingTime() / 1000;
    let msg = "Actions occuring! " + remainingSecs.toFixed(3) +
              " remaining seconds out of " + timeoutSecs;
    console.log(msg);
    this.setState({ timerActionText: msg })
  }
  onActive = () => {
    let msg = "You're active!";
    console.log(msg);
    this.setState({ timerActiveText: msg })
  }
  onIdle = () => {
    let msg = "You've been idle!";
    console.log(msg);
    this.setState({ timerIdleText: msg })
  }

  render() {
    return (
      <div>
        <IdleTimer
          ref={ref => { this.idleTimer = ref }}
          /* */
          crossTab={{
            type: 'localStorage',
            emitOnAllTabs: true
          }}
          /* */
          timeout={this.state.timeoutValue}
          onAction={this.onAction}
          onActive={this.onActive}
          onIdle={this.onIdle}>
        </IdleTimer>
        <p>{this.state.timerActionText}</p>
        <p>{this.state.timerActiveText}</p>
        <p>{this.state.timerIdleText}</p>
      </div>
    );
  }
}

export default IdleTimeout

Without crossTab everything runs as expected on a single tab, such as…

1. Run the app (yarn start)
2. Load it into chrome (http://localhost:3000/)
3. Press the refresh button, being careful to keep the mouse from entering the web page
4. After waiting the timeout time of 7 secs, the following is displayed:

• No action events.
• onActive not triggered.
• You’ve been idle! (1x) After moving the mouse onto the web page the following was displayed:
• Actions occurring! 6.612 remaining seconds out of 7
• You’re active! (1x)
• You’ve been idle! (1x)

With crossTab after waiting the timeout of 7 secs, I’m not seeing onIdle trigger prior to the mouse entering the page (same for 4.60 and 4.6.1-rc.5). After entering the page I see onAction and onActive trigger but not onIdle trigger (which I did see trigger with 4.60).

1. Run the app (yarn start)
2. Load it into chrome (http://localhost:3000/)
3. Press the browser refresh button, being careful to keep the mouse from entering the web page
4. After waiting the timeout time of 7 secs, the following was still displayed:

• No action events.
• onActive not triggered.
• onIdle not triggered.

1. After moving the mouse onto the web page the following was displayed:

• Actions occurring! 6.750 remaining seconds out of 7
• You’re active! (2x)
• onIdle not triggered.