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

@tekmaven

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;
@johnpapa
Owner

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

@tekmaven

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.

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

Did not fix the problem.

@jonbgallant

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

@jonbgallant

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 issue from a commit
@johnpapa 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
@johnpapa johnpapa closed this in a7d5d3e
@johnpapa
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.