Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Close Button Does Not Close in IE and Firefox #108

Closed
tekmaven opened this Issue · 6 comments

3 participants

Ryan Hoffman John Papa Jon Gallant
Ryan Hoffman

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;
John Papa
Owner

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

Ryan Hoffman

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.

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

Did not fix the problem.

Jon Gallant

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

Jon Gallant

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.

John Papa johnpapa closed this issue from a commit
John Papa johnpapa Closes #108.
Confirmed that clicking the close button in some browsers (FireFox, IE10) was not closing the toast. The problem was that the focus was still on the toast, and we want to toast to hang around normally when it has focus. So we need the focus code. But when we click the close button, now we explictly tell it to ignore the focus code.
a7d5d3e
John Papa johnpapa closed this in a7d5d3e
John Papa
Owner

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
Something went wrong with that request. Please try again.