palantir/blueprint

Toaster (static usage): Toast Notifications no longer appear at bottom of a scrolled page (regression)

Open

#4,864 opened on Aug 20, 2021

View on GitHub
 (3 comments) (0 reactions) (0 assignees)TypeScript (20,263 stars) (2,167 forks)batch import
Package: coreStatus: needs fix verificationType: bughelp wanted

Description

Environment

  • Package version(s): 3.48.0
  • Operating System: Windows 10
  • Browser name and version: Google Chrome 92.0.4515.159

Code Sandbox

https://codesandbox.io/s/vibrant-waterfall-9bjnr

Steps to reproduce

  1. Use toaster component statically (toaster = Toaster.create(...)) with positioning set to bottom
  2. Display a toast (toaster.show(..)) while the page is scrolled

Actual behaviour

The toast notification appears at a location that isn't the bottom of the viewport. This behaviour seems to have been introduced in version 3.40.0.

Expected behaviour

Expected the behaviour of previous blueprintjs versions (i.e. 3.39.0):

  • Toast notifications always appear at the bottom of the viewport, regardless of scroll location.
  • Position of notification remain at the bottom while scrolling

Possible solution

Set toaster container to always use fixed positioning via CSS:

.bp3-toast-container {
  position: fixed !important;
}

This may break non-static usage of the toaster component (especially when usePortal=false)

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.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
under 1 hour
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
CSS positioningReact componentsBlueprint toaster usage
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70
Research direction
Look at the toaster component's CSS in the Blueprint source, specifically the .bp3 toast container class. Investigate how the container's position is currently set and whether it can be changed to 'fixed' without affecting other use cases. Consider the usePortal prop and when fixed positioning might cause issues. Check the associated CodeSandbox to reproduce the bug. Review the discussion in the issue for any additional context or proposed solutions.
Toaster (static usage): Toast Notifications no longer appear at bottom of a scrolled page (regression) · palantir/blueprint#4864 | Good First Issue