Notifications created in rapid succession may not be removed from the DOM when dismissed about react-notifications-component

[teodosii]

Hi Smona,

Thanks for reporting. Will investigate

[stefanb2]

As a workaround for this problem I now make sure that the notification is removed in my helper function. Here is the gist of the code:

const makeNotification = notification => {
  const duration = notification.timeout ?? 5000;

  Promise.resolve()
    .then(() => Store.addNotification({
      ...notification,
      dismiss: {
        duration,
        ...
      },
      ...
    }))
    .then(id => new Promise(resolve =>
      setTimeout(
        () => {
          // Make sure the notification disappears
          Store.removeNotification(id);
          resolve();
        },
        duration
      )
    ));
};

[Smona]

This is interesting... I added a transition: visibility 0ms linear 500ms to .rnc__notification-item and visibility: hidden to my animation exit class. I was expecting to at least hide the element after the animation, but after a lot of button mashing I haven't been able to reproduce the bug since making this change. Perhaps there's a CSS event listener somewhere that isn't always being triggered without this rule?

For reference, here's our animation config:

            animationIn: ['animate__animated', 'animate__fadeInRight', 'animate__faster'],
            animationOut: ['animate__animated', 'animate__fadeOutRight', 'animate__faster'],
            // Chosen to complement duration of animate__faster speed above (500ms)
            slidingEnter: {
                duration: 200,
                timingFunction: 'ease-in-out',
                delay: 0,
            },
            slidingExit: {
                duration: 200,
                timingFunction: 'ease-in-out',
                delay: 300,
            },

[stefanb2]

I ran into the same issue.

BUT in my case I can't reproduce it on development code, i.e. in the Dev Env of my app, only on production code, i.e. when the app code is deployed.
CORRECTION in normal operations inside the app, i.e. what a normal user would see, there the development/production code behaves differently.

Now that I added a special button on the home page to generate many notifications in quick succession by clicking on it, I have now reproduced the behavior also in development code.