Use FormDatasubmitter parameter (#29028)

Author: jenseng

packages/react-dom-bindings/src/events/plugins/FormActionEventPlugin.js

@@ -45,30 +45,6 @@ function coerceFormActionProp(
 }
 }
 
-functioncreateFormDataWithSubmitter(
-form: HTMLFormElement,
-submitter: HTMLInputElement|HTMLButtonElement,
-){
-// The submitter's value should be included in the FormData.
-// It should be in the document order in the form.
-// Since the FormData constructor invokes the formdata event it also
-// needs to be available before that happens so after construction it's too
-// late. We use a temporary fake node for the duration of this event.
-// TODO: FormData takes a second argument that it's the submitter but this
-// is fairly new so not all browsers support it yet. Switch to that technique
-// when available.
-consttemp=submitter.ownerDocument.createElement('input');
-temp.name=submitter.name;
-temp.value=submitter.value;
-if(form.id){
-temp.setAttribute('form',form.id);
-}
-(submitter.parentNode: any).insertBefore(temp,submitter);
-constformData=newFormData(form);
-(temp.parentNode: any).removeChild(temp);
-returnformData;
-}
-
 /**
  * This plugin invokes action functions on forms, inputs and buttons if
  * the form doesn't prevent default.
@@ -129,9 +105,7 @@ function extractEvents(
 if(didCurrentEventScheduleTransition()){
 // We're going to set the pending form status, but because the submission
 // was prevented, we should not fire the action function.
-constformData=submitter
- ? createFormDataWithSubmitter(form,submitter)
- : newFormData(form);
+constformData=newFormData(form,submitter);
 constpendingState: FormStatus={
 pending: true,
 data: formData,
@@ -160,9 +134,7 @@ function extractEvents(
 event.preventDefault();
 
 // Dispatch the action and set a pending form status.
-constformData=submitter
- ? createFormDataWithSubmitter(form,submitter)
- : newFormData(form);
+constformData=newFormData(form,submitter);
 constpendingState: FormStatus={
 pending: true,
 data: formData,

packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetInlineCodeStrings.js

@@ -634,25 +634,7 @@ export function listenToFormSubmissionsForReplaying() {
 event.preventDefault();
 
 // Take a snapshot of the FormData at the time of the event.
-letformData;
-if(formDataSubmitter){
-// The submitter's value should be included in the FormData.
-// It should be in the document order in the form.
-// Since the FormData constructor invokes the formdata event it also
-// needs to be available before that happens so after construction it's too
-// late. We use a temporary fake node for the duration of this event.
-// TODO: FormData takes a second argument that it's the submitter but this
-// is fairly new so not all browsers support it yet. Switch to that technique
-// when available.
-consttemp=document.createElement('input');
-temp.name=formDataSubmitter.name;
-temp.value=formDataSubmitter.value;
-formDataSubmitter.parentNode.insertBefore(temp,formDataSubmitter);
-formData=newFormData(form);
-temp.parentNode.removeChild(temp);
-}else{
-formData=newFormData(form);
-}
+constformData=newFormData(form,formDataSubmitter);
 
 // Queue for replaying later. This field could potentially be shared with multiple
 // Reacts on the same page since each one will preventDefault for the next one.

packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetShared.js

@@ -14,8 +14,8 @@ global.IS_REACT_ACT_ENVIRONMENT = true;
 // Our current version of JSDOM doesn't implement the event dispatching
 // so we polyfill it.
 constNativeFormData=global.FormData;
-constFormDataPolyfill=functionFormData(form){
-constformData=newNativeFormData(form);
+constFormDataPolyfill=functionFormData(form,submitter){
+constformData=newNativeFormData(form,submitter);
 constformDataEvent=newEvent('formdata',{
 bubbles: true,
 cancelable: false,
@@ -489,11 +489,16 @@ describe('ReactDOMForm', () => {
 constinputRef=React.createRef();
 constbuttonRef=React.createRef();
 constoutsideButtonRef=React.createRef();
+constimageButtonRef=React.createRef();
 letbutton;
+letbuttonX;
+letbuttonY;
 lettitle;
 
 functionaction(formData){
 button=formData.get('button');
+buttonX=formData.get('button.x');
+buttonY=formData.get('button.y');
 title=formData.get('title');
 }
 
@@ -508,6 +513,12 @@ describe('ReactDOMForm', () => {
 <buttonname="button"value="edit"ref={buttonRef}>
  Edit
 </button>
+<input
+type="image"
+name="button"
+href="/some/image.png"
+ref={imageButtonRef}
+/>
 </form>
 <formid="form"action={action}>
 <inputtype="text"name="title"defaultValue="hello"/>
@@ -546,9 +557,12 @@ describe('ReactDOMForm', () => {
 expect(button).toBe('outside');
 expect(title).toBe('hello');
 
-// Ensure that the type field got correctly restored
-expect(inputRef.current.getAttribute('type')).toBe('submit');
-expect(buttonRef.current.getAttribute('type')).toBe(null);
+awaitsubmit(imageButtonRef.current);
+
+expect(button).toBe(null);
+expect(buttonX).toBe('0');
+expect(buttonY).toBe('0');
+expect(title).toBe('hello');
 });
 
 it('excludes the submitter name when the submitter is a function action',async()=>{

packages/react-dom/src/__tests__/ReactDOMForm-test.js

@@ -121,17 +121,7 @@ describe('ReactFlightDOMForm', () => {
 constmethod=(submitter&&submitter.formMethod)||form.method;
 constencType=(submitter&&submitter.formEnctype)||form.enctype;
 if(method==='post'&&encType==='multipart/form-data'){
-letformData;
-if(submitter){
-consttemp=document.createElement('input');
-temp.name=submitter.name;
-temp.value=submitter.value;
-submitter.parentNode.insertBefore(temp,submitter);
-formData=newFormData(form);
-temp.parentNode.removeChild(temp);
-}else{
-formData=newFormData(form);
-}
+constformData=newFormData(form,submitter);
 returnPOST(formData);
 }
 thrownewError('Navigate to: '+action);

packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMForm-test.js

@@ -45,30 +45,6 @@ function coerceFormActionProp(
 }
 }
 
-functioncreateFormDataWithSubmitter(
-form: HTMLFormElement,
-submitter: HTMLInputElement|HTMLButtonElement,
-){
-// The submitter's value should be included in the FormData.
-// It should be in the document order in the form.
-// Since the FormData constructor invokes the formdata event it also
-// needs to be available before that happens so after construction it's too
-// late. We use a temporary fake node for the duration of this event.
-// TODO: FormData takes a second argument that it's the submitter but this
-// is fairly new so not all browsers support it yet. Switch to that technique
-// when available.
-consttemp=submitter.ownerDocument.createElement('input');
-temp.name=submitter.name;
-temp.value=submitter.value;
-if(form.id){
-temp.setAttribute('form',form.id);
-}
-(submitter.parentNode: any).insertBefore(temp,submitter);
-constformData=newFormData(form);
-(temp.parentNode: any).removeChild(temp);
-returnformData;
-}
-
 /**
  * This plugin invokes action functions on forms, inputs and buttons if
  * the form doesn't prevent default.
@@ -129,9 +105,7 @@ function extractEvents(
 if(didCurrentEventScheduleTransition()){
 // We're going to set the pending form status, but because the submission
 // was prevented, we should not fire the action function.
-constformData=submitter
- ? createFormDataWithSubmitter(form,submitter)
- : newFormData(form);
+constformData=newFormData(form,submitter);
 constpendingState: FormStatus={
 pending: true,
 data: formData,
@@ -160,9 +134,7 @@ function extractEvents(
 event.preventDefault();
 
 // Dispatch the action and set a pending form status.
-constformData=submitter
- ? createFormDataWithSubmitter(form,submitter)
- : newFormData(form);
+constformData=newFormData(form,submitter);
 constpendingState: FormStatus={
 pending: true,
 data: formData,

packages/react-dom-bindings/src/events/plugins/FormActionEventPlugin.js

@@ -634,25 +634,7 @@ export function listenToFormSubmissionsForReplaying() {
 event.preventDefault();
 
 // Take a snapshot of the FormData at the time of the event.
-letformData;
-if(formDataSubmitter){
-// The submitter's value should be included in the FormData.
-// It should be in the document order in the form.
-// Since the FormData constructor invokes the formdata event it also
-// needs to be available before that happens so after construction it's too
-// late. We use a temporary fake node for the duration of this event.
-// TODO: FormData takes a second argument that it's the submitter but this
-// is fairly new so not all browsers support it yet. Switch to that technique
-// when available.
-consttemp=document.createElement('input');
-temp.name=formDataSubmitter.name;
-temp.value=formDataSubmitter.value;
-formDataSubmitter.parentNode.insertBefore(temp,formDataSubmitter);
-formData=newFormData(form);
-temp.parentNode.removeChild(temp);
-}else{
-formData=newFormData(form);
-}
+constformData=newFormData(form,formDataSubmitter);
 
 // Queue for replaying later. This field could potentially be shared with multiple
 // Reacts on the same page since each one will preventDefault for the next one.

packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetInlineCodeStrings.js

@@ -14,8 +14,8 @@ global.IS_REACT_ACT_ENVIRONMENT = true;
 // Our current version of JSDOM doesn't implement the event dispatching
 // so we polyfill it.
 constNativeFormData=global.FormData;
-constFormDataPolyfill=functionFormData(form){
-constformData=newNativeFormData(form);
+constFormDataPolyfill=functionFormData(form,submitter){
+constformData=newNativeFormData(form,submitter);
 constformDataEvent=newEvent('formdata',{
 bubbles: true,
 cancelable: false,
@@ -489,11 +489,16 @@ describe('ReactDOMForm', () => {
 constinputRef=React.createRef();
 constbuttonRef=React.createRef();
 constoutsideButtonRef=React.createRef();
+constimageButtonRef=React.createRef();
 letbutton;
+letbuttonX;
+letbuttonY;
 lettitle;
 
 functionaction(formData){
 button=formData.get('button');
+buttonX=formData.get('button.x');
+buttonY=formData.get('button.y');
 title=formData.get('title');
 }
 
@@ -508,6 +513,12 @@ describe('ReactDOMForm', () => {
 <buttonname="button"value="edit"ref={buttonRef}>
  Edit
 </button>
+<input
+type="image"
+name="button"
+href="/some/image.png"
+ref={imageButtonRef}
+/>
 </form>
 <formid="form"action={action}>
 <inputtype="text"name="title"defaultValue="hello"/>
@@ -546,9 +557,12 @@ describe('ReactDOMForm', () => {
 expect(button).toBe('outside');
 expect(title).toBe('hello');
 
-// Ensure that the type field got correctly restored
-expect(inputRef.current.getAttribute('type')).toBe('submit');
-expect(buttonRef.current.getAttribute('type')).toBe(null);
+awaitsubmit(imageButtonRef.current);
+
+expect(button).toBe(null);
+expect(buttonX).toBe('0');
+expect(buttonY).toBe('0');
+expect(title).toBe('hello');
 });
 
 it('excludes the submitter name when the submitter is a function action',async()=>{

packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetShared.js

@@ -121,17 +121,7 @@ describe('ReactFlightDOMForm', () => {
 constmethod=(submitter&&submitter.formMethod)||form.method;
 constencType=(submitter&&submitter.formEnctype)||form.enctype;
 if(method==='post'&&encType==='multipart/form-data'){
-letformData;
-if(submitter){
-consttemp=document.createElement('input');
-temp.name=submitter.name;
-temp.value=submitter.value;
-submitter.parentNode.insertBefore(temp,submitter);
-formData=newFormData(form);
-temp.parentNode.removeChild(temp);
-}else{
-formData=newFormData(form);
-}
+constformData=newFormData(form,submitter);
 returnPOST(formData);
 }
 thrownewError('Navigate to: '+action);

packages/react-dom/src/__tests__/ReactDOMForm-test.js

@@ -45,30 +45,6 @@ function coerceFormActionProp(
 }
 }
 
-functioncreateFormDataWithSubmitter(
-form: HTMLFormElement,
-submitter: HTMLInputElement|HTMLButtonElement,
-){
-// The submitter's value should be included in the FormData.
-// It should be in the document order in the form.
-// Since the FormData constructor invokes the formdata event it also
-// needs to be available before that happens so after construction it's too
-// late. We use a temporary fake node for the duration of this event.
-// TODO: FormData takes a second argument that it's the submitter but this
-// is fairly new so not all browsers support it yet. Switch to that technique
-// when available.
-consttemp=submitter.ownerDocument.createElement('input');
-temp.name=submitter.name;
-temp.value=submitter.value;
-if(form.id){
-temp.setAttribute('form',form.id);
-}
-(submitter.parentNode: any).insertBefore(temp,submitter);
-constformData=newFormData(form);
-(temp.parentNode: any).removeChild(temp);
-returnformData;
-}
-
 /**
  * This plugin invokes action functions on forms, inputs and buttons if
  * the form doesn't prevent default.
@@ -129,9 +105,7 @@ function extractEvents(
 if(didCurrentEventScheduleTransition()){
 // We're going to set the pending form status, but because the submission
 // was prevented, we should not fire the action function.
-constformData=submitter
- ? createFormDataWithSubmitter(form,submitter)
- : newFormData(form);
+constformData=newFormData(form,submitter);
 constpendingState: FormStatus={
 pending: true,
 data: formData,
@@ -160,9 +134,7 @@ function extractEvents(
 event.preventDefault();
 
 // Dispatch the action and set a pending form status.
-constformData=submitter
- ? createFormDataWithSubmitter(form,submitter)
- : newFormData(form);
+constformData=newFormData(form,submitter);
 constpendingState: FormStatus={
 pending: true,
 data: formData,

packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMForm-test.js

@@ -634,25 +634,7 @@ export function listenToFormSubmissionsForReplaying() {
 event.preventDefault();
 
 // Take a snapshot of the FormData at the time of the event.
-letformData;
-if(formDataSubmitter){
-// The submitter's value should be included in the FormData.
-// It should be in the document order in the form.
-// Since the FormData constructor invokes the formdata event it also
-// needs to be available before that happens so after construction it's too
-// late. We use a temporary fake node for the duration of this event.
-// TODO: FormData takes a second argument that it's the submitter but this
-// is fairly new so not all browsers support it yet. Switch to that technique
-// when available.
-consttemp=document.createElement('input');
-temp.name=formDataSubmitter.name;
-temp.value=formDataSubmitter.value;
-formDataSubmitter.parentNode.insertBefore(temp,formDataSubmitter);
-formData=newFormData(form);
-temp.parentNode.removeChild(temp);
-}else{
-formData=newFormData(form);
-}
+constformData=newFormData(form,formDataSubmitter);
 
 // Queue for replaying later. This field could potentially be shared with multiple
 // Reacts on the same page since each one will preventDefault for the next one.

packages/react-dom-bindings/src/events/plugins/FormActionEventPlugin.js

@@ -14,8 +14,8 @@ global.IS_REACT_ACT_ENVIRONMENT = true;
 // Our current version of JSDOM doesn't implement the event dispatching
 // so we polyfill it.
 constNativeFormData=global.FormData;
-constFormDataPolyfill=functionFormData(form){
-constformData=newNativeFormData(form);
+constFormDataPolyfill=functionFormData(form,submitter){
+constformData=newNativeFormData(form,submitter);
 constformDataEvent=newEvent('formdata',{
 bubbles: true,
 cancelable: false,
@@ -489,11 +489,16 @@ describe('ReactDOMForm', () => {
 constinputRef=React.createRef();
 constbuttonRef=React.createRef();
 constoutsideButtonRef=React.createRef();
+constimageButtonRef=React.createRef();
 letbutton;
+letbuttonX;
+letbuttonY;
 lettitle;
 
 functionaction(formData){
 button=formData.get('button');
+buttonX=formData.get('button.x');
+buttonY=formData.get('button.y');
 title=formData.get('title');
 }
 
@@ -508,6 +513,12 @@ describe('ReactDOMForm', () => {
 <buttonname="button"value="edit"ref={buttonRef}>
  Edit
 </button>
+<input
+type="image"
+name="button"
+href="/some/image.png"
+ref={imageButtonRef}
+/>
 </form>
 <formid="form"action={action}>
 <inputtype="text"name="title"defaultValue="hello"/>
@@ -546,9 +557,12 @@ describe('ReactDOMForm', () => {
 expect(button).toBe('outside');
 expect(title).toBe('hello');
 
-// Ensure that the type field got correctly restored
-expect(inputRef.current.getAttribute('type')).toBe('submit');
-expect(buttonRef.current.getAttribute('type')).toBe(null);
+awaitsubmit(imageButtonRef.current);
+
+expect(button).toBe(null);
+expect(buttonX).toBe('0');
+expect(buttonY).toBe('0');
+expect(title).toBe('hello');
 });
 
 it('excludes the submitter name when the submitter is a function action',async()=>{

packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetInlineCodeStrings.js

@@ -121,17 +121,7 @@ describe('ReactFlightDOMForm', () => {
 constmethod=(submitter&&submitter.formMethod)||form.method;
 constencType=(submitter&&submitter.formEnctype)||form.enctype;
 if(method==='post'&&encType==='multipart/form-data'){
-letformData;
-if(submitter){
-consttemp=document.createElement('input');
-temp.name=submitter.name;
-temp.value=submitter.value;
-submitter.parentNode.insertBefore(temp,submitter);
-formData=newFormData(form);
-temp.parentNode.removeChild(temp);
-}else{
-formData=newFormData(form);
-}
+constformData=newFormData(form,submitter);
 returnPOST(formData);
 }
 thrownewError('Navigate to: '+action);

packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetShared.js

@@ -45,30 +45,6 @@ function coerceFormActionProp(
 }
 }
 
-functioncreateFormDataWithSubmitter(
-form: HTMLFormElement,
-submitter: HTMLInputElement|HTMLButtonElement,
-){
-// The submitter's value should be included in the FormData.
-// It should be in the document order in the form.
-// Since the FormData constructor invokes the formdata event it also
-// needs to be available before that happens so after construction it's too
-// late. We use a temporary fake node for the duration of this event.
-// TODO: FormData takes a second argument that it's the submitter but this
-// is fairly new so not all browsers support it yet. Switch to that technique
-// when available.
-consttemp=submitter.ownerDocument.createElement('input');
-temp.name=submitter.name;
-temp.value=submitter.value;
-if(form.id){
-temp.setAttribute('form',form.id);
-}
-(submitter.parentNode: any).insertBefore(temp,submitter);
-constformData=newFormData(form);
-(temp.parentNode: any).removeChild(temp);
-returnformData;
-}
-
 /**
  * This plugin invokes action functions on forms, inputs and buttons if
  * the form doesn't prevent default.
@@ -129,9 +105,7 @@ function extractEvents(
 if(didCurrentEventScheduleTransition()){
 // We're going to set the pending form status, but because the submission
 // was prevented, we should not fire the action function.
-constformData=submitter
- ? createFormDataWithSubmitter(form,submitter)
- : newFormData(form);
+constformData=newFormData(form,submitter);
 constpendingState: FormStatus={
 pending: true,
 data: formData,
@@ -160,9 +134,7 @@ function extractEvents(
 event.preventDefault();
 
 // Dispatch the action and set a pending form status.
-constformData=submitter
- ? createFormDataWithSubmitter(form,submitter)
- : newFormData(form);
+constformData=newFormData(form,submitter);
 constpendingState: FormStatus={
 pending: true,
 data: formData,

packages/react-dom/src/__tests__/ReactDOMForm-test.js

@@ -634,25 +634,7 @@ export function listenToFormSubmissionsForReplaying() {
 event.preventDefault();
 
 // Take a snapshot of the FormData at the time of the event.
-letformData;
-if(formDataSubmitter){
-// The submitter's value should be included in the FormData.
-// It should be in the document order in the form.
-// Since the FormData constructor invokes the formdata event it also
-// needs to be available before that happens so after construction it's too
-// late. We use a temporary fake node for the duration of this event.
-// TODO: FormData takes a second argument that it's the submitter but this
-// is fairly new so not all browsers support it yet. Switch to that technique
-// when available.
-consttemp=document.createElement('input');
-temp.name=formDataSubmitter.name;
-temp.value=formDataSubmitter.value;
-formDataSubmitter.parentNode.insertBefore(temp,formDataSubmitter);
-formData=newFormData(form);
-temp.parentNode.removeChild(temp);
-}else{
-formData=newFormData(form);
-}
+constformData=newFormData(form,formDataSubmitter);
 
 // Queue for replaying later. This field could potentially be shared with multiple
 // Reacts on the same page since each one will preventDefault for the next one.

packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMForm-test.js

@@ -14,8 +14,8 @@ global.IS_REACT_ACT_ENVIRONMENT = true;
 // Our current version of JSDOM doesn't implement the event dispatching
 // so we polyfill it.
 constNativeFormData=global.FormData;
-constFormDataPolyfill=functionFormData(form){
-constformData=newNativeFormData(form);
+constFormDataPolyfill=functionFormData(form,submitter){
+constformData=newNativeFormData(form,submitter);
 constformDataEvent=newEvent('formdata',{
 bubbles: true,
 cancelable: false,
@@ -489,11 +489,16 @@ describe('ReactDOMForm', () => {
 constinputRef=React.createRef();
 constbuttonRef=React.createRef();
 constoutsideButtonRef=React.createRef();
+constimageButtonRef=React.createRef();
 letbutton;
+letbuttonX;
+letbuttonY;
 lettitle;
 
 functionaction(formData){
 button=formData.get('button');
+buttonX=formData.get('button.x');
+buttonY=formData.get('button.y');
 title=formData.get('title');
 }
 
@@ -508,6 +513,12 @@ describe('ReactDOMForm', () => {
 <buttonname="button"value="edit"ref={buttonRef}>
  Edit
 </button>
+<input
+type="image"
+name="button"
+href="/some/image.png"
+ref={imageButtonRef}
+/>
 </form>
 <formid="form"action={action}>
 <inputtype="text"name="title"defaultValue="hello"/>
@@ -546,9 +557,12 @@ describe('ReactDOMForm', () => {
 expect(button).toBe('outside');
 expect(title).toBe('hello');
 
-// Ensure that the type field got correctly restored
-expect(inputRef.current.getAttribute('type')).toBe('submit');
-expect(buttonRef.current.getAttribute('type')).toBe(null);
+awaitsubmit(imageButtonRef.current);
+
+expect(button).toBe(null);
+expect(buttonX).toBe('0');
+expect(buttonY).toBe('0');
+expect(title).toBe('hello');
 });
 
 it('excludes the submitter name when the submitter is a function action',async()=>{

packages/react-dom-bindings/src/events/plugins/FormActionEventPlugin.js

@@ -121,17 +121,7 @@ describe('ReactFlightDOMForm', () => {
 constmethod=(submitter&&submitter.formMethod)||form.method;
 constencType=(submitter&&submitter.formEnctype)||form.enctype;
 if(method==='post'&&encType==='multipart/form-data'){
-letformData;
-if(submitter){
-consttemp=document.createElement('input');
-temp.name=submitter.name;
-temp.value=submitter.value;
-submitter.parentNode.insertBefore(temp,submitter);
-formData=newFormData(form);
-temp.parentNode.removeChild(temp);
-}else{
-formData=newFormData(form);
-}
+constformData=newFormData(form,submitter);
 returnPOST(formData);
 }
 thrownewError('Navigate to: '+action);

packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetInlineCodeStrings.js

@@ -45,30 +45,6 @@ function coerceFormActionProp(
 }
 }
 
-functioncreateFormDataWithSubmitter(
-form: HTMLFormElement,
-submitter: HTMLInputElement|HTMLButtonElement,
-){
-// The submitter's value should be included in the FormData.
-// It should be in the document order in the form.
-// Since the FormData constructor invokes the formdata event it also
-// needs to be available before that happens so after construction it's too
-// late. We use a temporary fake node for the duration of this event.
-// TODO: FormData takes a second argument that it's the submitter but this
-// is fairly new so not all browsers support it yet. Switch to that technique
-// when available.
-consttemp=submitter.ownerDocument.createElement('input');
-temp.name=submitter.name;
-temp.value=submitter.value;
-if(form.id){
-temp.setAttribute('form',form.id);
-}
-(submitter.parentNode: any).insertBefore(temp,submitter);
-constformData=newFormData(form);
-(temp.parentNode: any).removeChild(temp);
-returnformData;
-}
-
 /**
  * This plugin invokes action functions on forms, inputs and buttons if
  * the form doesn't prevent default.
@@ -129,9 +105,7 @@ function extractEvents(
 if(didCurrentEventScheduleTransition()){
 // We're going to set the pending form status, but because the submission
 // was prevented, we should not fire the action function.
-constformData=submitter
- ? createFormDataWithSubmitter(form,submitter)
- : newFormData(form);
+constformData=newFormData(form,submitter);
 constpendingState: FormStatus={
 pending: true,
 data: formData,
@@ -160,9 +134,7 @@ function extractEvents(
 event.preventDefault();
 
 // Dispatch the action and set a pending form status.
-constformData=submitter
- ? createFormDataWithSubmitter(form,submitter)
- : newFormData(form);
+constformData=newFormData(form,submitter);
 constpendingState: FormStatus={
 pending: true,
 data: formData,

packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetShared.js

@@ -634,25 +634,7 @@ export function listenToFormSubmissionsForReplaying() {
 event.preventDefault();
 
 // Take a snapshot of the FormData at the time of the event.
-letformData;
-if(formDataSubmitter){
-// The submitter's value should be included in the FormData.
-// It should be in the document order in the form.
-// Since the FormData constructor invokes the formdata event it also
-// needs to be available before that happens so after construction it's too
-// late. We use a temporary fake node for the duration of this event.
-// TODO: FormData takes a second argument that it's the submitter but this
-// is fairly new so not all browsers support it yet. Switch to that technique
-// when available.
-consttemp=document.createElement('input');
-temp.name=formDataSubmitter.name;
-temp.value=formDataSubmitter.value;
-formDataSubmitter.parentNode.insertBefore(temp,formDataSubmitter);
-formData=newFormData(form);
-temp.parentNode.removeChild(temp);
-}else{
-formData=newFormData(form);
-}
+constformData=newFormData(form,formDataSubmitter);
 
 // Queue for replaying later. This field could potentially be shared with multiple
 // Reacts on the same page since each one will preventDefault for the next one.

packages/react-dom/src/__tests__/ReactDOMForm-test.js

@@ -14,8 +14,8 @@ global.IS_REACT_ACT_ENVIRONMENT = true;
 // Our current version of JSDOM doesn't implement the event dispatching
 // so we polyfill it.
 constNativeFormData=global.FormData;
-constFormDataPolyfill=functionFormData(form){
-constformData=newNativeFormData(form);
+constFormDataPolyfill=functionFormData(form,submitter){
+constformData=newNativeFormData(form,submitter);
 constformDataEvent=newEvent('formdata',{
 bubbles: true,
 cancelable: false,
@@ -489,11 +489,16 @@ describe('ReactDOMForm', () => {
 constinputRef=React.createRef();
 constbuttonRef=React.createRef();
 constoutsideButtonRef=React.createRef();
+constimageButtonRef=React.createRef();
 letbutton;
+letbuttonX;
+letbuttonY;
 lettitle;
 
 functionaction(formData){
 button=formData.get('button');
+buttonX=formData.get('button.x');
+buttonY=formData.get('button.y');
 title=formData.get('title');
 }
 
@@ -508,6 +513,12 @@ describe('ReactDOMForm', () => {
 <buttonname="button"value="edit"ref={buttonRef}>
  Edit
 </button>
+<input
+type="image"
+name="button"
+href="/some/image.png"
+ref={imageButtonRef}
+/>
 </form>
 <formid="form"action={action}>
 <inputtype="text"name="title"defaultValue="hello"/>
@@ -546,9 +557,12 @@ describe('ReactDOMForm', () => {
 expect(button).toBe('outside');
 expect(title).toBe('hello');
 
-// Ensure that the type field got correctly restored
-expect(inputRef.current.getAttribute('type')).toBe('submit');
-expect(buttonRef.current.getAttribute('type')).toBe(null);
+awaitsubmit(imageButtonRef.current);
+
+expect(button).toBe(null);
+expect(buttonX).toBe('0');
+expect(buttonY).toBe('0');
+expect(title).toBe('hello');
 });
 
 it('excludes the submitter name when the submitter is a function action',async()=>{

packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMForm-test.js

@@ -121,17 +121,7 @@ describe('ReactFlightDOMForm', () => {
 constmethod=(submitter&&submitter.formMethod)||form.method;
 constencType=(submitter&&submitter.formEnctype)||form.enctype;
 if(method==='post'&&encType==='multipart/form-data'){
-letformData;
-if(submitter){
-consttemp=document.createElement('input');
-temp.name=submitter.name;
-temp.value=submitter.value;
-submitter.parentNode.insertBefore(temp,submitter);
-formData=newFormData(form);
-temp.parentNode.removeChild(temp);
-}else{
-formData=newFormData(form);
-}
+constformData=newFormData(form,submitter);
 returnPOST(formData);
 }
 thrownewError('Navigate to: '+action);

packages/react-dom-bindings/src/events/plugins/FormActionEventPlugin.js

@@ -45,30 +45,6 @@ function coerceFormActionProp(
 }
 }
 
-functioncreateFormDataWithSubmitter(
-form: HTMLFormElement,
-submitter: HTMLInputElement|HTMLButtonElement,
-){
-// The submitter's value should be included in the FormData.
-// It should be in the document order in the form.
-// Since the FormData constructor invokes the formdata event it also
-// needs to be available before that happens so after construction it's too
-// late. We use a temporary fake node for the duration of this event.
-// TODO: FormData takes a second argument that it's the submitter but this
-// is fairly new so not all browsers support it yet. Switch to that technique
-// when available.
-consttemp=submitter.ownerDocument.createElement('input');
-temp.name=submitter.name;
-temp.value=submitter.value;
-if(form.id){
-temp.setAttribute('form',form.id);
-}
-(submitter.parentNode: any).insertBefore(temp,submitter);
-constformData=newFormData(form);
-(temp.parentNode: any).removeChild(temp);
-returnformData;
-}
-
 /**
  * This plugin invokes action functions on forms, inputs and buttons if
  * the form doesn't prevent default.
@@ -129,9 +105,7 @@ function extractEvents(
 if(didCurrentEventScheduleTransition()){
 // We're going to set the pending form status, but because the submission
 // was prevented, we should not fire the action function.
-constformData=submitter
- ? createFormDataWithSubmitter(form,submitter)
- : newFormData(form);
+constformData=newFormData(form,submitter);
 constpendingState: FormStatus={
 pending: true,
 data: formData,
@@ -160,9 +134,7 @@ function extractEvents(
 event.preventDefault();
 
 // Dispatch the action and set a pending form status.
-constformData=submitter
- ? createFormDataWithSubmitter(form,submitter)
- : newFormData(form);
+constformData=newFormData(form,submitter);
 constpendingState: FormStatus={
 pending: true,
 data: formData,

packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetInlineCodeStrings.js

@@ -634,25 +634,7 @@ export function listenToFormSubmissionsForReplaying() {
 event.preventDefault();
 
 // Take a snapshot of the FormData at the time of the event.
-letformData;
-if(formDataSubmitter){
-// The submitter's value should be included in the FormData.
-// It should be in the document order in the form.
-// Since the FormData constructor invokes the formdata event it also
-// needs to be available before that happens so after construction it's too
-// late. We use a temporary fake node for the duration of this event.
-// TODO: FormData takes a second argument that it's the submitter but this
-// is fairly new so not all browsers support it yet. Switch to that technique
-// when available.
-consttemp=document.createElement('input');
-temp.name=formDataSubmitter.name;
-temp.value=formDataSubmitter.value;
-formDataSubmitter.parentNode.insertBefore(temp,formDataSubmitter);
-formData=newFormData(form);
-temp.parentNode.removeChild(temp);
-}else{
-formData=newFormData(form);
-}
+constformData=newFormData(form,formDataSubmitter);
 
 // Queue for replaying later. This field could potentially be shared with multiple
 // Reacts on the same page since each one will preventDefault for the next one.

packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetShared.js

@@ -14,8 +14,8 @@ global.IS_REACT_ACT_ENVIRONMENT = true;
 // Our current version of JSDOM doesn't implement the event dispatching
 // so we polyfill it.
 constNativeFormData=global.FormData;
-constFormDataPolyfill=functionFormData(form){
-constformData=newNativeFormData(form);
+constFormDataPolyfill=functionFormData(form,submitter){
+constformData=newNativeFormData(form,submitter);
 constformDataEvent=newEvent('formdata',{
 bubbles: true,
 cancelable: false,
@@ -489,11 +489,16 @@ describe('ReactDOMForm', () => {
 constinputRef=React.createRef();
 constbuttonRef=React.createRef();
 constoutsideButtonRef=React.createRef();
+constimageButtonRef=React.createRef();
 letbutton;
+letbuttonX;
+letbuttonY;
 lettitle;
 
 functionaction(formData){
 button=formData.get('button');
+buttonX=formData.get('button.x');
+buttonY=formData.get('button.y');
 title=formData.get('title');
 }
 
@@ -508,6 +513,12 @@ describe('ReactDOMForm', () => {
 <buttonname="button"value="edit"ref={buttonRef}>
  Edit
 </button>
+<input
+type="image"
+name="button"
+href="/some/image.png"
+ref={imageButtonRef}
+/>
 </form>
 <formid="form"action={action}>
 <inputtype="text"name="title"defaultValue="hello"/>
@@ -546,9 +557,12 @@ describe('ReactDOMForm', () => {
 expect(button).toBe('outside');
 expect(title).toBe('hello');
 
-// Ensure that the type field got correctly restored
-expect(inputRef.current.getAttribute('type')).toBe('submit');
-expect(buttonRef.current.getAttribute('type')).toBe(null);
+awaitsubmit(imageButtonRef.current);
+
+expect(button).toBe(null);
+expect(buttonX).toBe('0');
+expect(buttonY).toBe('0');
+expect(title).toBe('hello');
 });
 
 it('excludes the submitter name when the submitter is a function action',async()=>{

packages/react-dom/src/__tests__/ReactDOMForm-test.js

@@ -121,17 +121,7 @@ describe('ReactFlightDOMForm', () => {
 constmethod=(submitter&&submitter.formMethod)||form.method;
 constencType=(submitter&&submitter.formEnctype)||form.enctype;
 if(method==='post'&&encType==='multipart/form-data'){
-letformData;
-if(submitter){
-consttemp=document.createElement('input');
-temp.name=submitter.name;
-temp.value=submitter.value;
-submitter.parentNode.insertBefore(temp,submitter);
-formData=newFormData(form);
-temp.parentNode.removeChild(temp);
-}else{
-formData=newFormData(form);
-}
+constformData=newFormData(form,submitter);
 returnPOST(formData);
 }
 thrownewError('Navigate to: '+action);

packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMForm-test.js

@@ -45,30 +45,6 @@ function coerceFormActionProp(
 }
 }
 
-functioncreateFormDataWithSubmitter(
-form: HTMLFormElement,
-submitter: HTMLInputElement|HTMLButtonElement,
-){
-// The submitter's value should be included in the FormData.
-// It should be in the document order in the form.
-// Since the FormData constructor invokes the formdata event it also
-// needs to be available before that happens so after construction it's too
-// late. We use a temporary fake node for the duration of this event.
-// TODO: FormData takes a second argument that it's the submitter but this
-// is fairly new so not all browsers support it yet. Switch to that technique
-// when available.
-consttemp=submitter.ownerDocument.createElement('input');
-temp.name=submitter.name;
-temp.value=submitter.value;
-if(form.id){
-temp.setAttribute('form',form.id);
-}
-(submitter.parentNode: any).insertBefore(temp,submitter);
-constformData=newFormData(form);
-(temp.parentNode: any).removeChild(temp);
-returnformData;
-}
-
 /**
  * This plugin invokes action functions on forms, inputs and buttons if
  * the form doesn't prevent default.
@@ -129,9 +105,7 @@ function extractEvents(
 if(didCurrentEventScheduleTransition()){
 // We're going to set the pending form status, but because the submission
 // was prevented, we should not fire the action function.
-constformData=submitter
- ? createFormDataWithSubmitter(form,submitter)
- : newFormData(form);
+constformData=newFormData(form,submitter);
 constpendingState: FormStatus={
 pending: true,
 data: formData,
@@ -160,9 +134,7 @@ function extractEvents(
 event.preventDefault();
 
 // Dispatch the action and set a pending form status.
-constformData=submitter
- ? createFormDataWithSubmitter(form,submitter)
- : newFormData(form);
+constformData=newFormData(form,submitter);
 constpendingState: FormStatus={
 pending: true,
 data: formData,

packages/react-dom-bindings/src/events/plugins/FormActionEventPlugin.js

@@ -634,25 +634,7 @@ export function listenToFormSubmissionsForReplaying() {
 event.preventDefault();
 
 // Take a snapshot of the FormData at the time of the event.
-letformData;
-if(formDataSubmitter){
-// The submitter's value should be included in the FormData.
-// It should be in the document order in the form.
-// Since the FormData constructor invokes the formdata event it also
-// needs to be available before that happens so after construction it's too
-// late. We use a temporary fake node for the duration of this event.
-// TODO: FormData takes a second argument that it's the submitter but this
-// is fairly new so not all browsers support it yet. Switch to that technique
-// when available.
-consttemp=document.createElement('input');
-temp.name=formDataSubmitter.name;
-temp.value=formDataSubmitter.value;
-formDataSubmitter.parentNode.insertBefore(temp,formDataSubmitter);
-formData=newFormData(form);
-temp.parentNode.removeChild(temp);
-}else{
-formData=newFormData(form);
-}
+constformData=newFormData(form,formDataSubmitter);
 
 // Queue for replaying later. This field could potentially be shared with multiple
 // Reacts on the same page since each one will preventDefault for the next one.

packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetInlineCodeStrings.js

@@ -14,8 +14,8 @@ global.IS_REACT_ACT_ENVIRONMENT = true;
 // Our current version of JSDOM doesn't implement the event dispatching
 // so we polyfill it.
 constNativeFormData=global.FormData;
-constFormDataPolyfill=functionFormData(form){
-constformData=newNativeFormData(form);
+constFormDataPolyfill=functionFormData(form,submitter){
+constformData=newNativeFormData(form,submitter);
 constformDataEvent=newEvent('formdata',{
 bubbles: true,
 cancelable: false,
@@ -489,11 +489,16 @@ describe('ReactDOMForm', () => {
 constinputRef=React.createRef();
 constbuttonRef=React.createRef();
 constoutsideButtonRef=React.createRef();
+constimageButtonRef=React.createRef();
 letbutton;
+letbuttonX;
+letbuttonY;
 lettitle;
 
 functionaction(formData){
 button=formData.get('button');
+buttonX=formData.get('button.x');
+buttonY=formData.get('button.y');
 title=formData.get('title');
 }
 
@@ -508,6 +513,12 @@ describe('ReactDOMForm', () => {
 <buttonname="button"value="edit"ref={buttonRef}>
  Edit
 </button>
+<input
+type="image"
+name="button"
+href="/some/image.png"
+ref={imageButtonRef}
+/>
 </form>
 <formid="form"action={action}>
 <inputtype="text"name="title"defaultValue="hello"/>
@@ -546,9 +557,12 @@ describe('ReactDOMForm', () => {
 expect(button).toBe('outside');
 expect(title).toBe('hello');
 
-// Ensure that the type field got correctly restored
-expect(inputRef.current.getAttribute('type')).toBe('submit');
-expect(buttonRef.current.getAttribute('type')).toBe(null);
+awaitsubmit(imageButtonRef.current);
+
+expect(button).toBe(null);
+expect(buttonX).toBe('0');
+expect(buttonY).toBe('0');
+expect(title).toBe('hello');
 });
 
 it('excludes the submitter name when the submitter is a function action',async()=>{

packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetShared.js

@@ -121,17 +121,7 @@ describe('ReactFlightDOMForm', () => {
 constmethod=(submitter&&submitter.formMethod)||form.method;
 constencType=(submitter&&submitter.formEnctype)||form.enctype;
 if(method==='post'&&encType==='multipart/form-data'){
-letformData;
-if(submitter){
-consttemp=document.createElement('input');
-temp.name=submitter.name;
-temp.value=submitter.value;
-submitter.parentNode.insertBefore(temp,submitter);
-formData=newFormData(form);
-temp.parentNode.removeChild(temp);
-}else{
-formData=newFormData(form);
-}
+constformData=newFormData(form,submitter);
 returnPOST(formData);
 }
 thrownewError('Navigate to: '+action);

packages/react-dom/src/__tests__/ReactDOMForm-test.js

@@ -45,30 +45,6 @@ function coerceFormActionProp(
 }
 }
 
-functioncreateFormDataWithSubmitter(
-form: HTMLFormElement,
-submitter: HTMLInputElement|HTMLButtonElement,
-){
-// The submitter's value should be included in the FormData.
-// It should be in the document order in the form.
-// Since the FormData constructor invokes the formdata event it also
-// needs to be available before that happens so after construction it's too
-// late. We use a temporary fake node for the duration of this event.
-// TODO: FormData takes a second argument that it's the submitter but this
-// is fairly new so not all browsers support it yet. Switch to that technique
-// when available.
-consttemp=submitter.ownerDocument.createElement('input');
-temp.name=submitter.name;
-temp.value=submitter.value;
-if(form.id){
-temp.setAttribute('form',form.id);
-}
-(submitter.parentNode: any).insertBefore(temp,submitter);
-constformData=newFormData(form);
-(temp.parentNode: any).removeChild(temp);
-returnformData;
-}
-
 /**
  * This plugin invokes action functions on forms, inputs and buttons if
  * the form doesn't prevent default.
@@ -129,9 +105,7 @@ function extractEvents(
 if(didCurrentEventScheduleTransition()){
 // We're going to set the pending form status, but because the submission
 // was prevented, we should not fire the action function.
-constformData=submitter
- ? createFormDataWithSubmitter(form,submitter)
- : newFormData(form);
+constformData=newFormData(form,submitter);
 constpendingState: FormStatus={
 pending: true,
 data: formData,
@@ -160,9 +134,7 @@ function extractEvents(
 event.preventDefault();
 
 // Dispatch the action and set a pending form status.
-constformData=submitter
- ? createFormDataWithSubmitter(form,submitter)
- : newFormData(form);
+constformData=newFormData(form,submitter);
 constpendingState: FormStatus={
 pending: true,
 data: formData,

packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMForm-test.js

@@ -634,25 +634,7 @@ export function listenToFormSubmissionsForReplaying() {
 event.preventDefault();
 
 // Take a snapshot of the FormData at the time of the event.
-letformData;
-if(formDataSubmitter){
-// The submitter's value should be included in the FormData.
-// It should be in the document order in the form.
-// Since the FormData constructor invokes the formdata event it also
-// needs to be available before that happens so after construction it's too
-// late. We use a temporary fake node for the duration of this event.
-// TODO: FormData takes a second argument that it's the submitter but this
-// is fairly new so not all browsers support it yet. Switch to that technique
-// when available.
-consttemp=document.createElement('input');
-temp.name=formDataSubmitter.name;
-temp.value=formDataSubmitter.value;
-formDataSubmitter.parentNode.insertBefore(temp,formDataSubmitter);
-formData=newFormData(form);
-temp.parentNode.removeChild(temp);
-}else{
-formData=newFormData(form);
-}
+constformData=newFormData(form,formDataSubmitter);
 
 // Queue for replaying later. This field could potentially be shared with multiple
 // Reacts on the same page since each one will preventDefault for the next one.

packages/react-dom-bindings/src/events/plugins/FormActionEventPlugin.js

@@ -14,8 +14,8 @@ global.IS_REACT_ACT_ENVIRONMENT = true;
 // Our current version of JSDOM doesn't implement the event dispatching
 // so we polyfill it.
 constNativeFormData=global.FormData;
-constFormDataPolyfill=functionFormData(form){
-constformData=newNativeFormData(form);
+constFormDataPolyfill=functionFormData(form,submitter){
+constformData=newNativeFormData(form,submitter);
 constformDataEvent=newEvent('formdata',{
 bubbles: true,
 cancelable: false,
@@ -489,11 +489,16 @@ describe('ReactDOMForm', () => {
 constinputRef=React.createRef();
 constbuttonRef=React.createRef();
 constoutsideButtonRef=React.createRef();
+constimageButtonRef=React.createRef();
 letbutton;
+letbuttonX;
+letbuttonY;
 lettitle;
 
 functionaction(formData){
 button=formData.get('button');
+buttonX=formData.get('button.x');
+buttonY=formData.get('button.y');
 title=formData.get('title');
 }
 
@@ -508,6 +513,12 @@ describe('ReactDOMForm', () => {
 <buttonname="button"value="edit"ref={buttonRef}>
  Edit
 </button>
+<input
+type="image"
+name="button"
+href="/some/image.png"
+ref={imageButtonRef}
+/>
 </form>
 <formid="form"action={action}>
 <inputtype="text"name="title"defaultValue="hello"/>
@@ -546,9 +557,12 @@ describe('ReactDOMForm', () => {
 expect(button).toBe('outside');
 expect(title).toBe('hello');
 
-// Ensure that the type field got correctly restored
-expect(inputRef.current.getAttribute('type')).toBe('submit');
-expect(buttonRef.current.getAttribute('type')).toBe(null);
+awaitsubmit(imageButtonRef.current);
+
+expect(button).toBe(null);
+expect(buttonX).toBe('0');
+expect(buttonY).toBe('0');
+expect(title).toBe('hello');
 });
 
 it('excludes the submitter name when the submitter is a function action',async()=>{

packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetInlineCodeStrings.js

@@ -121,17 +121,7 @@ describe('ReactFlightDOMForm', () => {
 constmethod=(submitter&&submitter.formMethod)||form.method;
 constencType=(submitter&&submitter.formEnctype)||form.enctype;
 if(method==='post'&&encType==='multipart/form-data'){
-letformData;
-if(submitter){
-consttemp=document.createElement('input');
-temp.name=submitter.name;
-temp.value=submitter.value;
-submitter.parentNode.insertBefore(temp,submitter);
-formData=newFormData(form);
-temp.parentNode.removeChild(temp);
-}else{
-formData=newFormData(form);
-}
+constformData=newFormData(form,submitter);
 returnPOST(formData);
 }
 thrownewError('Navigate to: '+action);