allowPropagation option

README.md

@@ -154,6 +154,7 @@ If `gravity` is equals to `bottom`, it will be pushed from bottom.
 | escapeMarkup | boolean | Toggle the default behavior of escaping HTML markup | true |
 | style | object | Use the HTML DOM Style properties to add any style directly to toast | |
 | ariaLive | string | Announce the toast to screen readers, see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions for options | "polite" |
+| allowPropagation | boolean | allow events inside the modal to propagate when destination is undefined | false |
 | oldestFirst | boolean | Set the order in which toasts are stacked in page | true |
 
 > Deprecated properties: `backgroundColor` -  use `style.background` option instead

src/toastify-es.js

@@ -26,7 +26,8 @@
  * @property {Function} onClick - Invoked when the toast is clicked
  * @property {Object} offset - Ability to add some offset to axis
  * @property {boolean} escapeMarkup - Toggle the default behavior of escaping HTML markup
- * @property {string} ariaLive - Use the HTML DOM style property to add styles to toast
+ * @property {string} ariaLive - Announce the toast to screen readers
+ * @property {boolean} allowPropagation - Allow events inside the modal to propagate when destination is undefined
  * @property {Object} style - Use the HTML DOM style property to add styles to toast
  */
 
@@ -54,6 +55,7 @@ class Toastify {
       offset: { x: 0, y: 0 },
       escapeMarkup: true,
       ariaLive: "polite",
+      allowPropagation: false,
       style: { background: "" },
     };
 
@@ -162,7 +164,9 @@ class Toastify {
      * @param {Function} [options.onClick] - Invoked when the toast is clicked
      * @param {Object} [options.offset] - Ability to add some offset to axis
      * @param {boolean} [options.escapeMarkup=true] - Toggle the default behavior of escaping HTML markup
+     * @property {boolean} allowPropagation - Allow events inside the modal to propagate when destination is undefined
      * @param {string} [options.ariaLive] - Announce the toast to screen readers
+     * 
      * @param {Object} [options.style] - Use the HTML DOM style property to add styles to toast
      * @private
      */
@@ -319,7 +323,9 @@ class Toastify {
         divElement.addEventListener(
           "click",
           (event) => {
-            event.stopPropagation();
+            if (!this.options.allowPropagation) {
+              event.stopPropagation();
+            }
             this.options.onClick();
           }
         );

src/toastify.js

@@ -44,6 +44,7 @@
     offset: {x: 0, y: 0},
     escapeMarkup: true,
     ariaLive: 'polite',
+    allowPropagation: false,
     style: {background: ''}
   };
 
@@ -85,6 +86,7 @@
       this.options.offset = options.offset || Toastify.defaults.offset; // toast offset
       this.options.escapeMarkup = options.escapeMarkup !== undefined ? options.escapeMarkup : Toastify.defaults.escapeMarkup;
       this.options.ariaLive = options.ariaLive || Toastify.defaults.ariaLive;
+      this.options.allowPropagation = options.allowPropagation !== undefined ? options.allowPropagation : Toastify.defaults.allowPropagation;
       this.options.style = options.style || Toastify.defaults.style;
       if(options.backgroundColor) {
         this.options.style.background = options.backgroundColor;
@@ -241,7 +243,9 @@
         divElement.addEventListener(
           "click",
           function(event) {
-            event.stopPropagation();
+            if (!this.options.allowPropagation) {
+              event.stopPropagation();
+            }
             this.options.onClick();
           }.bind(this)
         );