Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[core] fix: toasters closing immediately on hover if timeout is set to 0 #6783

Merged
merged 1 commit into from
May 3, 2024

Conversation

gluxon
Copy link
Contributor

@gluxon gluxon commented May 3, 2024

Fixes #6742, which was a regression from #6656 / @blueprintjs/core@5.9.0.

Context

The docs specify that a timeout prop of 0 will cause toasts to persist until a user manually dismisses it.

Milliseconds to wait before automatically dismissing toast. Providing a value less than or equal to 0 will disable the timeout (this is discouraged).

Screenshot 2024-05-02 at 11 29 05 PM

Problem

In a semi-recent refactor of the <OverlayToaster> component, a timeout value of 0 caused the toaster to instead be immediately dismissed. Note how hovering in and out of a progress toast causes it to disappear.

before.mov

Explanation

The new <Toast2> implementation does properly check if the timeout prop is 0 or negative on initial mount.

// start timeout on mount or change, cancel on unmount
React.useEffect(() => {
if (timeout != null && timeout > 0) {
startTimeout();

However, it's incorrect on the pause/resume timeout logic that happens when users mouse over a toaster. This logic always starts a timeout on mouse out, even if the timeout is 0. The original <Toast> implementation didn't do this.

onMouseEnter={clearTimeout}
onMouseLeave={startTimeout}

Changes

Copying the logic from the original implementation, which doesn't schedule a timeout at all if it's 0.

https://github.com/palantir/blueprint/blob/9dfba77ec5094c7752e5b73eb49a7e72dced9dcb/packages/core/src/components/toast/toast.tsx#L117-LL122

after.mov

@svc-palantir-github
Copy link

Fix toasters immediately closing on hover if timeout is set to 0

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

@gluxon gluxon changed the title Fix toasters closing immediately on hover if timeout is set to 0 [core] fix: toasters closing immediately on hover if timeout is set to 0 May 3, 2024
@gluxon gluxon marked this pull request as ready for review May 3, 2024 03:41
@gluxon gluxon requested review from ericjeney and pgoldberg May 3, 2024 03:42
// timeout is triggered & cancelled by updating `isTimeoutStarted` state
useTimeout(
() => {
triggerDismiss(true);
},
isTimeoutStarted && timeout !== undefined ? timeout : null,
isTimeoutStarted && isTimeoutEnabled ? timeout : null,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This fix looks simple. The hard part was making sure it was the right fix, which I ended up convincing myself is the case.

@gluxon gluxon merged commit 070b802 into develop May 3, 2024
14 checks passed
@gluxon gluxon deleted the bcheng/fix-toast-dismiss-on-mouseleave branch May 3, 2024 18:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Toaster with timeout zero is dismissed early
4 participants