Skip to content
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

Mouseout after closing causes error on removeChild #38

Open
haydster7 opened this issue Sep 17, 2019 · 4 comments
Open

Mouseout after closing causes error on removeChild #38

haydster7 opened this issue Sep 17, 2019 · 4 comments
Labels
bug good first issue Issue that can be picked up by first timers in open source

Comments

@haydster7
Copy link
Contributor

If close is set to true and duration is not infinite, and close is clicked, then the mouse is moved off where the toast would have been (or is still animating), a second timeout is created to hide the element.
As the element will already be hidden by the time that second timeout executes (due to the immediate close function), the element is null and removeChild throws a TypeError.

I have a couple of suggestions to fix this, not sure what would be preferred.

  1. I tried setting pointer-events to none as soon as closing, then once hidden removed pointer-events, but for some reason the css didnt update or something and the mouseout was still firing. To get around this I explicitly checked the pointer-events attribute before setting the mouseout timeout, that seemed to work well.
  2. Create a variable within the Toastify object called isClosing. Set to true when close is clicked, and set to false once the element is completely hidden. Check for isClosing before setting the mouseout timeout.
@apvarun
Copy link
Owner

apvarun commented Dec 24, 2019

Can you reproduce this in an online IDE? Tried checking this problem and it isn't happening.
https://codesandbox.io/s/toastify-closing-toasts-with-timers-z6i9j

@mukzen
Copy link

mukzen commented Jan 6, 2020

I can observe a similar, maybe related error. It happens when you click on the close icon and move the mouse off from where the toast would have been before the timeout runs out. The culprit sits in line 253, where the timeout callback removes the toast without testing, wether it is still available in DOM.
For now it's mostly cosmetical, an inconvenience, but an error stil ;)

BTW: this error is present in the online IDE link you posted...

@apvarun
Copy link
Owner

apvarun commented Jan 7, 2020

@mukzen Thanks for the reaffirmation. Feel free to raise a PR for them same. I believe it just requires to have a check for element before attempting to remove.

@apvarun apvarun added bug good first issue Issue that can be picked up by first timers in open source labels Jan 7, 2020
@DwayneHawkins
Copy link

@mukzen Thanks for the reaffirmation. Feel free to raise a PR for them same. I believe it just requires to have a check for element before attempting to remove.

I believe the better solution would be not to re-instantiate the timeout on mouseleave, after the close button has been clicked.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug good first issue Issue that can be picked up by first timers in open source
Projects
None yet
Development

No branches or pull requests

4 participants