BUG - removeOnHoverTimeOut not applied properly

[Vadorequest]

This is either a bug or a misunderstanding of the removeOnHoverTimeOut.

      // Display the message 4s per error, so that the user has time to see all missing fields (UX)
      const timeout = fields.length * 4000;

      toastr.error(title, {
        position: 'bottom-left', // Because in production, in the iframe, we don't see them if they're on top
        timeOut: timeout,
        removeOnHover: true,
        removeOnHoverTimeOut: timeout,
        component: <p dangerouslySetInnerHTML={{ __html: message }} />,
        closeOnToastrClick: false,
      });

I'm setting timeOut and removeOnHoverTimeOut to accomplish the following behaviour:

1. Validation error (form) happen, display a toast
2. Toast should be displayed 4 seconds per error field
3. If user hovers on the toast, the toast should keep being displayed, allow error message copy, timeout should pause during hovering (provide enough time for user to read the error message and figure out what's wrong without stress)
4. If user has hovered and stops hovering then timeout should either use the removeOnHoverTimeOut value (basically reset the timeout), or use the last timeout value before pausing (timeout goes back to the value it was set before it was paused)

Current behaviour:

1. Validation error (form) happen, display a toast
2. Toast is be displayed 4 seconds per error field
3. If user hovers on the toast, the toast keep being displayed, allows error message copy, timeout does pause during hovering
4. If user has hovered and stops hovering then timeout goes wild and is set back to 1000 instead of the removeOnHoverTimeOut value and the message gets hidden too fast

[thibaultvdb-incerta]

Is this issue already being cared off? I'm having the same problem at the moment.

[Vadorequest]

I doubt anyone addressed this issue yet @thibaultvdb-incerta :)

It doesn't block me since I used a workaround and didn't need a particular behaviour, but it may be more problematic in your case.

[thibaultvdb-incerta]

@Vadorequest What workaround did you use then, if I may be so curious? :D

[Vadorequest]

I mostly ignored the UX issue, if the use hovers on the toast then it'll hide too fast but can't do much about it without digging into the bug itself.

const timeout = fields.length * 4000;

      toastr.error(title, {
        position: 'bottom-left', // Because in production, in the iframe, we don't see them if they're on top
        timeOut: timeout,
        removeOnHover: true,
        removeOnHoverTimeOut: timeout,
        component: <p dangerouslySetInnerHTML={{ __html: message }} />,
        closeOnToastrClick: false,
      });

I'm contented with the following, wish it'd be better but it ain't that critical in my case