Merge pull request #19 from github/add-form-requestsubmit

add form requestsubmit

Author: keithamus

docs/index.html

@@ -565,6 +565,20 @@ <h1>GitHub Feature Support Table</h1>
             <td data-supported="true"><div>76+</div></td>
             <td data-supported="true"><div>15.0+</div></td>
           </tr>
+          <tr>
+            <th>
+              <a href="https://developer.mozilla.org/docs/Web/API/HTMLFormElement/requestSubmit">
+                <code>HTMLFormElement.requestSubmit</code>
+              </a>
+            </th>
+            <td data-polyfill="formRequestSubmit"><div>*</div></td>
+            <td data-supported="true"><div>76+</div></td>
+            <td data-supported="true"><div>79+</div></td>
+            <td data-supported="true"><div>75+</div></td>
+            <td data-supported="false"<div>*</div></td>
+            <td data-supported="true"><div>63+</div></td>
+            <td data-supported="true"><div>12.0+</div></td>
+          </tr>
           <tr>
             <th>
               <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwn">

src/form-requestsubmit.ts

@@ -0,0 +1,32 @@
+export function requestSubmit(
+  this: HTMLFormElement,
+  submitter: HTMLButtonElement | HTMLInputElement | null = null
+): void {
+  const event = new SubmitEvent('submit', {bubbles: true, cancelable: true, submitter})
+  let input
+  if (submitter && submitter.name) {
+    input = Object.assign(document.createElement('input'), {
+      type: 'hidden',
+      hidden: true,
+      name: submitter.name,
+      value: submitter.value
+    })
+    this.append(input)
+  }
+  this.checkValidity() && !this.dispatchEvent(event) && this.submit()
+  input?.remove()
+}
+
+export function isSupported(): boolean {
+  return 'requestSubmit' in HTMLFormElement.prototype && typeof HTMLFormElement.prototype.requestSubmit === 'function'
+}
+
+export function isPolyfilled(): boolean {
+  return HTMLFormElement.prototype.requestSubmit === requestSubmit
+}
+
+export function apply(): void {
+  if (!isSupported()) {
+    HTMLFormElement.prototype.requestSubmit = requestSubmit
+  }
+}

src/index.ts

@@ -5,6 +5,7 @@ import * as arrayAt from './arraylike-at.js'
 import * as cryptoRandomUUID from './crypto-randomuuid.js'
 import * as elementReplaceChildren from './element-replacechildren.js'
 import * as eventAbortSignal from './event-abortsignal.js'
+import * as formRequestSubmit from './form-requestsubmit.js'
 import * as objectHasOwn from './object-hasown.js'
 import * as promiseAllSettled from './promise-allsettled.js'
 import * as promiseAny from './promise-any.js'
@@ -60,6 +61,7 @@ export const polyfills = {
   cryptoRandomUUID,
   elementReplaceChildren,
   eventAbortSignal,
+  formRequestSubmit,
   objectHasOwn,
   promiseAllSettled,
   promiseAny,

test/form-requestsubmit.js

@@ -0,0 +1,73 @@
+import {requestSubmit, apply, isPolyfilled, isSupported} from '../lib/form-requestsubmit.js'
+
+describe('requestSubmit', () => {
+  let form
+  beforeEach(() => {
+    form = document.createElement('form')
+    document.body.append(form)
+  })
+  afterEach(() => {
+    form.remove()
+  })
+
+  it('has standard isSupported, isPolyfilled, apply API', () => {
+    expect(isSupported).to.be.a('function')
+    expect(isPolyfilled).to.be.a('function')
+    expect(apply).to.be.a('function')
+    expect(isSupported()).to.be.a('boolean')
+    expect(isPolyfilled()).to.equal(false)
+  })
+
+  it('does not dispatch or submit for invalid forms', () => {
+    const input = document.createElement('input')
+    input.required = true
+    form.append(input)
+    let called = false
+    form.addEventListener('submit', () => {
+      called = true
+    })
+    requestSubmit.call(form)
+    expect(called).to.equal(false)
+  })
+
+  it('dispatches submit event', () => {
+    const input = document.createElement('input')
+    form.append(input)
+    let called = false
+    form.addEventListener('submit', event => {
+      called = true
+      event.stopPropagation()
+    })
+    requestSubmit.call(form)
+    expect(called).to.equal(true)
+  })
+
+  it('passes submitter in event', () => {
+    const input = document.createElement('input')
+    input.type = 'button'
+    form.append(input)
+    let submitter = null
+    form.addEventListener('submit', event => {
+      submitter = event.submitter
+      event.stopPropagation()
+    })
+    requestSubmit.call(form, input)
+    expect(submitter).to.equal(input)
+  })
+
+  it('includes the input value in FormData', () => {
+    const input = document.createElement('input')
+    input.type = 'button'
+    input.name = 'foo'
+    input.value = '1'
+    form.append(input)
+    let formdata = null
+    form.addEventListener('submit', event => {
+      formdata = new FormData(form)
+      event.stopPropagation()
+    })
+    requestSubmit.call(form, input)
+    expect(formdata.get('foo')).to.equal('1')
+    expect(Array.from(form.querySelectorAll('input')).length).to.equal(1)
+  })
+})