Giters

emilkowalski / sonner

An opinionated toast component for React.

Home Page:https://sonner.emilkowal.ski

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

UI is broken when switch position frequently

jellli opened this issue · comments

commented

Describe the feature / bug 📝:

Jan-24-2024 10-38-48

Steps to reproduce the bug 🔁:

  1. click top center several times
  2. click top left several times
  3. repeat step 1 and step 2 once
commented

Working on it

commented

@emilkowalski From what I can see the problem is that the height are used to create the index.

I tested this with clicking top-center three times, which results in [3, 2, 1] for heights. Once I click top-leftonce it results in [4, 1, 2, 3] for heights. The cause is that the index in heights is set by the the mounting of the component. Once it changes from top-center to top-left 3, 2, 1 are getting unmounted, which removes them from heights. Then they are mounted again in the top left part of the screen which messes up the order.

The usual fix I would suggest is using toasts as the single source of truth for the orders of the Toasts and make heights a map with toast.id as a key and the height as a value. But the definition contains the information that the current implementation is used for better speed. I would appreciate it if you could take a look at it.