hperrin / svelte-material-ui

Svelte Material UI Components
https://sveltematerialui.com/
Apache License 2.0
3.27k stars 287 forks source link

Menu component dispatch event issue on destroy of the element #614

Open AnahitWeb opened 11 months ago

AnahitWeb commented 11 months ago

I am using the Menu to generate a list of options for my application. The options include Update, Rename, Delete, Hide/Unhide, etc. However, whenever I try to delete or hide an item from the list, I encounter a dispatch console error. (Please note that the "hide" functionality only renders the item based on a set of conditions.)

Selecting either DELETE or HIDE removes the HTML elements from the DOM, triggering the dispatch console error. From my understanding, this error occurs because the dispatch event is triggered after elements have already been removed from the DOM.

After investigating the issue, I noticed that there might be a slight delay in the dispatch event, possibly due to some kind of animation. To address this, I attempted to use await tick(), which is usually helpful in handling animation delays, but unfortunately, it didn't work as expected. Consequently, I opted to add a timeout of 50ms using the following code:

export async function sleep(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

This temporary workaround seems to solve the issue of the dispatch event error.

I am reaching out to you to verify this issue and seek a more permanent solution. Any assistance would be greatly appreciated. This issue is not happening on 6.2.0, but started to happen in 7.0.0-beta.14

Thank you for your support!

Screenshot 2023-07-17 at 21 21 00 Screenshot 2023-07-17 at 21 24 26