fix(toast): resume timers if pointer leaves region due to toast being removed #7771
Conversation
|
it still seems like when i focus on a toast, it'll still auto dismiss even though the timer should have paused Screen.Recording.2025-02-14.at.4.32.08.PM.mov |
|
@yihuiliao I'm having trouble reproducing this. Is this still easy to reproduce for you? |
|
so i click on the "low priority" toasts three times, and then i tab to focus on the toast. after that point, i just wait and then it'll auto dismiss |
toast-timout.movThat is strange, I still can't reproduce. |
|
hm okay slightly revised instructions. what if you try opening up three "low priority" toasts, and then dismissing them by clicking the clear button. then opening three more "low priority" toasts, pressing tab, and waiting for the auto dismiss it seems like when it's the "low priority 1" i can't reproduce the issue, but when it's a different number i can |
|
Looks like this is pre-existing. I'll work on a fix in this PR. |
| }; | ||
|
|
||
| if (state.visibleToasts.length < prevToastCount.current && state.visibleToasts.length > 0) { | ||
| document.addEventListener('pointermove', onPointerMove); |
There was a problem hiding this comment.
if we use once, then it simplifies some of the cleanup
| document.addEventListener('pointermove', onPointerMove); | |
| document.addEventListener('pointermove', onPointerMove, {once: true}); |
| return () => { | ||
| document.removeEventListener('pointermove', onPointerMove); | ||
| }; | ||
| }, [state.visibleToasts, ref, state]); |
There was a problem hiding this comment.
| }, [state.visibleToasts, ref, state]); | |
| }, [state.visibleToasts, state.resumeAll, ref]); |
Closes #7024. Alternative to #7681
After a toast has been removed, we check the pointer position on the next
pointermoveevent. If it is now outside the toast region, we resume timers.For discussion:
pointermoveafter closing. This behavior seems good IMO. It gives the user time to process the new state and decide whether to move their pointer elsewhere or to the next toast (would cause another pause).Also, note that the original issue is no longer reproducible in RSP Toast after #7631, so I've updated the useToast story for testing this.
✅ Pull Request Checklist:
📝 Test Instructions:
In the useToast story with a timeout enabled, open two or more toasts
Close the top one and keep your mouse where it is
Confirm that the remaining toast(s) close after a few seconds due to the timeout. Previously they would not due to the timer not resuming, due to no pointerleave event being fired in this case.
🧢 Your Project: