Polyfill form attribute for submit buttons

Author: FelixHenninger

packages/library/src/html.js

@@ -54,6 +54,34 @@ export class Form extends Screen {
       ...options,
     })
 
+    // Polyfill the form attribute for IE11 and Edge
+    // (the click is sufficient here, because of the
+    // specification of implicit submissions in HTML5,
+    // see https://www.w3.org/TR/html5/single-page.html#implicit-submission)
+    // Note that this is not perfect -- in modern browsers,
+    // the type attribute is not required for submission;
+    // but it will help push users toward standard-conformant
+    // behavior so that the polyfill can be removed safely
+    // at some point in the future.
+    this.options.events['click button[type="submit"]'] = (e) => {
+      // If the button references another form...
+      if (e.target.getAttribute('form')) {
+        // ... find it and ...
+        const targetForm = this.options.el.querySelector(
+          `form#${ e.target.getAttribute('form') }`
+        )
+
+        // ... submit that form instead
+        // (this overrides the page structure, as per standard)
+        if (targetForm) {
+          return this.submit(e)
+        }
+      }
+
+      // Otherwise stick to default behavior
+      return false
+    }
+
     // Capture form submissions
     this.options.events['submit form'] = e => this.submit(e)
   }

packages/library/test/html.js

@@ -253,6 +253,23 @@ describe('HTML-based components', () => {
       })
     })
 
+    it('polyfills form attribute on submit buttons', () => {
+      // Test on the actual page, as above
+      f.options.el = null
+      f.options.content = '' +
+        '<form id="test">' +
+        '</form>' +
+        '<button type="submit" form="test">Click me</button>'
+
+      const spy = sinon.spy(f, 'submit')
+
+      return f.run().then(() => {
+        f.options.el.querySelector('button').click()
+        assert.ok(spy.calledOnce)
+        f.options.el.innerHTML = ''
+      })
+    })
+
     it('ends after successful submission', () => {
       f.options.content = exampleForm