Merge pull request #70 from samthor/dialog-button-fixes

update form method='dialog' to support button value, fix default returnValue

Author: samthor

dialog-polyfill.js

@@ -19,7 +19,7 @@
    */
   function findNearestDialog(el) {
     while (el) {
-      if (/dialog/i.test(el.nodeName)) {
+      if (el.nodeName == 'DIALOG') {
         return /** @type {HTMLDialogElement} */ (el);
       }
       el = el.parentElement;
@@ -54,6 +54,10 @@
     dialog.showModal = this.showModal.bind(this);
     dialog.close = this.close.bind(this);
 
+    if (!('returnValue' in dialog)) {
+      dialog.returnValue = '';
+    }
+
     if ('MutationObserver' in window) {
       var mo = new MutationObserver(this.maybeHideModal.bind(this));
       mo.observe(dialog, { attributes: true, attributeFilter: ['open'] });
@@ -398,7 +402,7 @@
   };
 
   dialogPolyfill.DialogManager.prototype.handleRemove_ = function(event) {
-    if (!/dialog/i.test(event.target.nodeName)) { return; }
+    if (event.target.nodeName != 'DIALOG') { return; }
 
     var dialog = /** @type {HTMLDialogElement} */ (event.target);
     if (!dialog.open) { return; }
@@ -459,12 +463,13 @@
     var dialog = findNearestDialog(/** @type {Element} */ (ev.target));
     if (!dialog) { return; }
 
-    // FIXME: The original event doesn't contain the INPUT element used to
-    // submit the form (if any). Look in some possible places.
+    // FIXME: The original event doesn't contain the element used to submit the
+    // form (if any). Look in some possible places.
     var returnValue;
     var cands = [document.activeElement, ev.explicitOriginalTarget];
+    var els = ['BUTTON', 'INPUT'];
     cands.some(function(cand) {
-      if (cand && cand.nodeName == 'INPUT' && cand.form == ev.target) {
+      if (cand && cand.form == ev.target && els.indexOf(cand.nodeName) != -1) {
         returnValue = cand.value;
         return true;
       }

suite.js

@@ -428,7 +428,7 @@ void function() {
   });
 
   suite('form', function() {
-    test('dialog method', function() {
+    test('dialog method input', function() {
       var value = 'ExpectedValue' + Math.random();
 
       var form = document.createElement('form');
@@ -452,6 +452,35 @@ void function() {
       assert.isFalse(dialog.open);
       assert.equal(dialog.returnValue, value);
     });
+    test('dialog method button', function() {
+      var value = 'ExpectedValue' + Math.random();
+
+      var form = document.createElement('form');
+      form.setAttribute('method', 'dialog');
+      dialog.appendChild(form);
+
+      var button = document.createElement('button');
+      button.value = value;
+      form.appendChild(button);
+
+      dialog.showModal();
+      button.focus();  // emulate user focus action
+      button.click();
+
+      assert.isFalse(dialog.open);
+      assert.equal(dialog.returnValue, value);
+
+      // Clear button value, confirm textContent is not used as value.
+      button.value = '';
+      button.removeAttribute('value');
+      button.textContent = value;
+      dialog.show();
+      button.focus();  // emulate user focus action
+      button.click();
+
+      assert.equal(dialog.returnValue, button.value,
+          'don\'t take button textContent as value');
+    });
   });
 
   suite('order', function() {