-
Notifications
You must be signed in to change notification settings - Fork 504
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
Editing notifications (or recreating them) #1667
Comments
Sorry for bringing this up again - thanks for the new function, but the bug described in here is not fixed by that :( |
@max06 Are you on the edge channel ? If not, it has just not been released yet. Note that if you change the id, it will recreate the notification instead of editing it |
@noook I'm testing with
It has the update-function, so I'd think it's fine. I did not change the id. Defined as const at the beginning of my routine, and reused till the end. Edit: Just in case it's just me... Recording.2024-04-15.130537-1.mp4 |
Here's the usage: https://stackblitz.com/edit/nuxt-ui-3ymaqy?file=components%2Fdemo.vue |
Oh I see what happened. In your reproduction, you remove the notification, and recreate it. You recreate it with a lower timeout to simulate the remaining time of your notification. What happens if you update the timeout (in this situation, reducing it) it will just lower the timeout of the notification from 10 seconds to 6, so you kind of remove 4 seconds off the notification's timeout when updating. Just don't update it, your |
I actually increased the timeout to 60 seconds, expecting either 55 or 60 seconds - not 5 :) |
To give you a rough idea: Stage 1 creates some resource definitions. This takes just some seconds and it either works or it doesn't. The second stage then waits for a specific event to happen, which can take up to a minute. |
I see. I don't think the However, I understand there might be unwanted behavior when updating a notification's timeout. @benjamincanac should I reset the notification's timer with a watcher on this specific's property update ? |
The weird thing is: I thought removing and recreating the notification would cause the timer to start from the beginning, since it should be (technically) a new element. At the moment I'm not so sure if the element gets removed at all on calling |
My guess is, there is no tick between the moment you remove and add the notification again, so the component is still mounted and the timeout not reset. As you can see, the timer starts on the ui/src/runtime/components/overlays/Notification.vue Lines 194 to 212 in bbc8f4e
Try |
So, a race condition! That I'd probably suggest something like this then: toast.update(id: string, notification: Partial<Notification>, resetTimeout: boolean) |
Not exactly a race condition. Vue will not re-render the element until all the values have been re-evaluated and not in a dirty state (one change can trigger the change of another variable multiple times, but we only want to re-render once). Once the variables's state is "clean", Vue knows it can apply the changes. In your situation, this is what happened. You removed the element, but you also added it back at the same time. The variable state was evaluated to "dirty" when you called remove (= no re-render), then added back (still "dirty"). All variables have been changed, so it is "clean" again. And the Calling I don't think setting a |
@noook Updated! Looks great, much better! 🙇🏼 Thanks a lot! ❤️ |
Environment
Version
v2.15.0
Reproduction
https://stackblitz.com/edit/nuxt-ui-vk1zzz?file=components%2Fdemo.vue
Description
I want to update notifications based on the current state of a routine.
Since there's no function for that, I went with reusing the notification id (after deleting the current one).
The reproduction shows a notification with 10 seconds timeout, sleeps 5 seconds, removes the notification and creates a new one with the same id, but different options (like a 60 seconds timeout).
-> New notification shows up, but only has 5 seconds left (also indicated by the timeout bar).
Additional context
No response
Logs
No response
The text was updated successfully, but these errors were encountered: