Close Button Does Not Close in IE and Firefox #108

Closed
tekmaven opened this Issue Aug 30, 2013 · 6 comments

Comments

Projects
None yet
3 participants

Version: 2.0.0rc1

When setting toastr.options.closeButton = true;, the "X" button does not close the ToastR popup in IE10 or Firefox 23.0.1.

Here is my configuration:

toastr.options.closeButton = true;
toastr.options.positionClass = "toast-top-full-width";
toastr.options.fadeIn = 1000;
toastr.options.timeOut = 0;
toastr.options.extendedTimeOut = 0;
Owner

johnpapa commented Aug 30, 2013

What does it do? Can you provide some debugging info from the console?

There is also a bug with the debug output on IE10. IE's console will just display [object Object]. I did change the line to do a JSON.stringify, and here is the debug output:

{
   "toastId":1,
   "state":"visible",
   "startTime":"2013-08-30T20:29:09.232Z",
   "options":{
      "tapToDismiss":true,
      "toastClass":"toast",
      "containerId":"toast-container",
      "debug":true,
      "showMethod":"fadeIn",
      "showDuration":300,
      "showEasing":"swing",
      "hideMethod":"fadeOut",
      "hideDuration":1000,
      "hideEasing":"swing",
      "extendedTimeOut":0,
      "iconClasses":{
         "error":"toast-error",
         "info":"toast-info",
         "success":"toast-success",
         "warning":"toast-warning"
      },
      "iconClass":"toast-info",
      "positionClass":"toast-top-full-width",
      "timeOut":0,
      "titleClass":"toast-title",
      "messageClass":"toast-message",
      "target":"body",
      "closeHtml":"<button>&times;</button>",
      "newestOnTop":true,
      "closeButton":true,
      "fadeIn":1000
   },
   "map":{
      "type":"success",
      "iconClass":"toast-success",
      "message":"hello"
   }
}

If you click the X in IE or Firefox, the X button "pushes down", and then nothing happens. Almost like there is no event bound to the button press. If you click anywhere else on the toast, it does dismiss. So in IE and Firefox you can dismiss the toast by clicking anywhere except the "X" button.

$toastElement.prepend($closeElement).click(hideToast);

Did not fix the problem.

The hideToast method is called when the closeButton is clicked. It works when you have a breakpoint set. Thinking it's a race issue.

It closes when I comment out the following lines in hideToast()

//if ($(':focus', $toastElement).length > 0) {
// return;
//}

I guess this is so it doesn't close when it has focus, but everything else seems to work for me, so I'm going with it.

@johnpapa johnpapa closed this in a7d5d3e Sep 5, 2013

Owner

johnpapa commented Sep 5, 2013

Thanks for reporting this. Made it easier to fix it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment