Merge pull request #214 from GoogleChrome/fix-submitter

fix possible .submitter being null
GoogleChrome · Jan 11, 2021 · 5033aac · 5033aac
2 parents 75df500 + 840c5e5
commit 5033aac
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 22 deletions.
diff --git a/dist/dialog-polyfill.esm.js b/dist/dialog-polyfill.esm.js
@@ -153,14 +153,15 @@ function findFocusableElementWithin(hostElement) {
 /**
  * Determines if an element is attached to the DOM.
  * @param {Element} element to check
- * @return {Boolean} whether the element is in DOM
+ * @return {boolean} whether the element is in DOM
  */
 function isConnected(element) {
   return element.isConnected || document.body.contains(element);
 }
 
 /**
  * @param {!Event} event
+ * @return {?Element}
  */
 function findFormSubmitter(event) {
   if (event.submitter) {
@@ -179,7 +180,7 @@ function findFormSubmitter(event) {
     submitter = root.activeElement;
   }
 
-  if (submitter.form !== form) {
+  if (!submitter || submitter.form !== form) {
     return null;
   }
   return submitter;
@@ -195,7 +196,7 @@ function maybeHandleSubmit(event) {
   var form = /** @type {!HTMLFormElement} */ (event.target);
 
   // We'd have a value if we clicked on an imagemap.
-  var value = dialogPolyfill.useValue;
+  var value = dialogPolyfill.imagemapUseValue;
   var submitter = findFormSubmitter(event);
   if (value === null && submitter) {
     value = submitter.value;
@@ -215,7 +216,8 @@ function maybeHandleSubmit(event) {
   }
   event.preventDefault();
 
-  if (submitter) {
+  if (value != null) {
+    // nb. we explicitly check against null/undefined
     dialog.close(value);
   } else {
     dialog.close();
@@ -751,7 +753,7 @@ dialogPolyfill.DialogManager.prototype.removeDialog = function(dpi) {
 
 dialogPolyfill.dm = new dialogPolyfill.DialogManager();
 dialogPolyfill.formSubmitter = null;
-dialogPolyfill.useValue = null;
+dialogPolyfill.imagemapUseValue = null;
 
 /**
  * Installs global handlers, such as click listers and native method overrides. These are needed
@@ -796,7 +798,7 @@ if (window.HTMLDialogElement === undefined) {
    */
   document.addEventListener('click', function(ev) {
     dialogPolyfill.formSubmitter = null;
-    dialogPolyfill.useValue = null;
+    dialogPolyfill.imagemapUseValue = null;
     if (ev.defaultPrevented) { return; }  // e.g. a submit which prevents default submission
 
     var target = /** @type {Element} */ (ev.target);
@@ -810,7 +812,7 @@ if (window.HTMLDialogElement === undefined) {
     if (!valid) {
       if (!(target.localName === 'input' && target.type === 'image')) { return; }
       // this is a <input type="image">, which can submit forms
-      dialogPolyfill.useValue = ev.offsetX + ',' + ev.offsetY;
+      dialogPolyfill.imagemapUseValue = ev.offsetX + ',' + ev.offsetY;
     }
 
     var dialog = findNearestDialog(target);

diff --git a/dist/dialog-polyfill.js b/dist/dialog-polyfill.js
@@ -159,14 +159,15 @@
   /**
    * Determines if an element is attached to the DOM.
    * @param {Element} element to check
-   * @return {Boolean} whether the element is in DOM
+   * @return {boolean} whether the element is in DOM
    */
   function isConnected(element) {
     return element.isConnected || document.body.contains(element);
   }
 
   /**
    * @param {!Event} event
+   * @return {?Element}
    */
   function findFormSubmitter(event) {
     if (event.submitter) {
@@ -185,7 +186,7 @@
       submitter = root.activeElement;
     }
 
-    if (submitter.form !== form) {
+    if (!submitter || submitter.form !== form) {
       return null;
     }
     return submitter;
@@ -201,7 +202,7 @@
     var form = /** @type {!HTMLFormElement} */ (event.target);
 
     // We'd have a value if we clicked on an imagemap.
-    var value = dialogPolyfill.useValue;
+    var value = dialogPolyfill.imagemapUseValue;
     var submitter = findFormSubmitter(event);
     if (value === null && submitter) {
       value = submitter.value;
@@ -221,7 +222,8 @@
     }
     event.preventDefault();
 
-    if (submitter) {
+    if (value != null) {
+      // nb. we explicitly check against null/undefined
       dialog.close(value);
     } else {
       dialog.close();
@@ -757,7 +759,7 @@
 
   dialogPolyfill.dm = new dialogPolyfill.DialogManager();
   dialogPolyfill.formSubmitter = null;
-  dialogPolyfill.useValue = null;
+  dialogPolyfill.imagemapUseValue = null;
 
   /**
    * Installs global handlers, such as click listers and native method overrides. These are needed
@@ -802,7 +804,7 @@
      */
     document.addEventListener('click', function(ev) {
       dialogPolyfill.formSubmitter = null;
-      dialogPolyfill.useValue = null;
+      dialogPolyfill.imagemapUseValue = null;
       if (ev.defaultPrevented) { return; }  // e.g. a submit which prevents default submission
 
       var target = /** @type {Element} */ (ev.target);
@@ -816,7 +818,7 @@
       if (!valid) {
         if (!(target.localName === 'input' && target.type === 'image')) { return; }
         // this is a <input type="image">, which can submit forms
-        dialogPolyfill.useValue = ev.offsetX + ',' + ev.offsetY;
+        dialogPolyfill.imagemapUseValue = ev.offsetX + ',' + ev.offsetY;
       }
 
       var dialog = findNearestDialog(target);

diff --git a/index.js b/index.js
@@ -154,14 +154,15 @@ function findFocusableElementWithin(hostElement) {
 /**
  * Determines if an element is attached to the DOM.
  * @param {Element} element to check
- * @return {Boolean} whether the element is in DOM
+ * @return {boolean} whether the element is in DOM
  */
 function isConnected(element) {
   return element.isConnected || document.body.contains(element);
 }
 
 /**
  * @param {!Event} event
+ * @return {?Element}
  */
 function findFormSubmitter(event) {
   if (event.submitter) {
@@ -180,7 +181,7 @@ function findFormSubmitter(event) {
     submitter = root.activeElement;
   }
 
-  if (submitter.form !== form) {
+  if (!submitter || submitter.form !== form) {
     return null;
   }
   return submitter;
@@ -196,7 +197,7 @@ function maybeHandleSubmit(event) {
   var form = /** @type {!HTMLFormElement} */ (event.target);
 
   // We'd have a value if we clicked on an imagemap.
-  var value = dialogPolyfill.useValue;
+  var value = dialogPolyfill.imagemapUseValue;
   var submitter = findFormSubmitter(event);
   if (value === null && submitter) {
     value = submitter.value;
@@ -216,7 +217,8 @@ function maybeHandleSubmit(event) {
   }
   event.preventDefault();
 
-  if (submitter) {
+  if (value != null) {
+    // nb. we explicitly check against null/undefined
     dialog.close(value);
   } else {
     dialog.close();
@@ -754,7 +756,7 @@ dialogPolyfill.DialogManager.prototype.removeDialog = function(dpi) {
 
 dialogPolyfill.dm = new dialogPolyfill.DialogManager();
 dialogPolyfill.formSubmitter = null;
-dialogPolyfill.useValue = null;
+dialogPolyfill.imagemapUseValue = null;
 
 /**
  * Installs global handlers, such as click listers and native method overrides. These are needed
@@ -799,7 +801,7 @@ if (window.HTMLDialogElement === undefined) {
    */
   document.addEventListener('click', function(ev) {
     dialogPolyfill.formSubmitter = null;
-    dialogPolyfill.useValue = null;
+    dialogPolyfill.imagemapUseValue = null;
     if (ev.defaultPrevented) { return; }  // e.g. a submit which prevents default submission
 
     var target = /** @type {Element} */ (ev.target);
@@ -813,7 +815,7 @@ if (window.HTMLDialogElement === undefined) {
     if (!valid) {
       if (!(target.localName === 'input' && target.type === 'image')) { return; }
       // this is a <input type="image">, which can submit forms
-      dialogPolyfill.useValue = ev.offsetX + ',' + ev.offsetY;
+      dialogPolyfill.imagemapUseValue = ev.offsetX + ',' + ev.offsetY;
     }
 
     var dialog = findNearestDialog(target);

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dialog-polyfill",
-  "version": "0.5.5",
+  "version": "0.5.6",
   "description": "Polyfill for the dialog element",
   "main": "dist/dialog-polyfill.js",
   "module": "dist/dialog-polyfill.esm.js",