palantir/blueprint

Toast animations do not work when multiple toasts are supposed to be animating

Open

#4,516 opened on Feb 3, 2021

View on GitHub
 (1 comment) (0 reactions) (0 assignees)TypeScript (20,263 stars) (2,167 forks)batch import
P3Package: coreType: bughelp wanted

Description

Environment

  • Package version(s): 3.38.2
  • Operating System: macOS 10.15
  • Browser name and version: Chrome 88.0.4324.96 (Official Build) (x86_64)

Code Sandbox

Link to a minimal repro: https://blueprintjs.com/docs/#core/components/toast

Steps to reproduce

  • Click any of the toast creation buttons in quick succession
  • OR set a low maximum and try to create a new toast once reaching the maximum
  • OR create a bunch of toasts and then clear() them all at once

Actual behavior

Only the newest/topmost (toast[0]) toast will actually animate, the rest will just instantly snap to their final state.

Expected behavior

All of the toasts will go through their full enter/exit animations.

Possible solution

Not a React guy but the common thread with this bug seems to be that only one animation will play at a time and when multiple animations should be playing only the toast at index 0 actually animates.

Contributor guide

Tech stack
typescriptreactcss
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
ReactTypeScriptCSS animations
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
55
Research direction
Investigate the Toast component's animation logic in 'src/components/toast/toast.tsx' and the Toaster container. The bug indicates that only the first toast (index 0) animates, suggesting that the animation state is not properly managed for multiple toasts. Look into how React handles key props and animation triggers; ensure each toast receives its own animation class. Review any recent changes to the animation implementation and check linked issues for similar fixes.