Skip to content

Commit 0601de5

Browse files
rvsiarvsia
committed
fix(renderer): prevent double submitting by button
1 parent 304342d commit 0601de5

File tree

8 files changed

+11
-31
lines changed

8 files changed

+11
-31
lines changed

‎__mocks__/mock-layout-mapper.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import { layoutComponents } from "../packages/react-form-renderer/src/constants";
33

44
export const layoutMapper = {
5-
[layoutComponents.FORM_WRAPPER]: ({ children }) => <div>{ children }</div>,
5+
[layoutComponents.FORM_WRAPPER]: ({ children, ...rest }) => <form {...rest}>{ children }</form>,
66
[layoutComponents.BUTTON]: ({ label, ...rest }) => <button { ...rest }>{ label }</button>,
77
[layoutComponents.BUTTON_GROUP]: ({ children }) => <div>{ children }</div>,
88
[layoutComponents.TITLE]: ({ children }) => <div>{ children }</div>,

‎packages/pf4-component-mapper/src/tests/field-array/__snapshots__/field-array.test.js.snap‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -666,12 +666,10 @@ exports[`FieldArray should render array field correctly 1`] = `
666666
<ButtonLayout
667667
key="form-submit"
668668
label="Submit"
669-
onClick={[Function]}
670669
type="submit"
671670
variant="primary"
672671
>
673672
<Component
674-
onClick={[Function]}
675673
type="submit"
676674
variant="primary"
677675
>
@@ -684,15 +682,13 @@ exports[`FieldArray should render array field correctly 1`] = `
684682
undefined,
685683
],
686684
"isDisabled": undefined,
687-
"onClick": [Function],
688685
"type": "submit",
689686
"variant": "primary",
690687
}
691688
}
692689
consumerContext={null}
693690
>
694691
<Button
695-
onClick={[Function]}
696692
ouiaContext={
697693
Object {
698694
"isOuia": false,
@@ -707,7 +703,6 @@ exports[`FieldArray should render array field correctly 1`] = `
707703
aria-label={null}
708704
className="pf-c-button pf-m-primary"
709705
disabled={false}
710-
onClick={[Function]}
711706
tabIndex={null}
712707
type="submit"
713708
>

‎packages/react-form-renderer/demo/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const submitTest = (...args) => new Promise(resolve => {
1616
const FormButtons = props => {
1717
return (
1818
<div>
19-
<button disabled={props.submitting} type="button" onClick={props.form.submit}>Submit</button>
19+
<button disabled={props.submitting} type="submit">Submit</button>
2020
</div>
2121
)
2222
}
@@ -31,7 +31,7 @@ const App = () => (
3131
clearedValue={'bla'}
3232
layoutMapper={layoutMapper}
3333
formFieldsMapper={formFieldsMapper}
34-
onSubmit={console.log}
34+
onSubmit={() => console.log(554)}
3535
onCancel={console.log}
3636
canReset
3737
onReset={() => console.log('i am resseting')}

‎packages/react-form-renderer/src/form-renderer/form-controls.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,15 +38,14 @@ const FormControls = ({
3838
: (
3939
<RendererContext.Consumer>
4040
{ ({ layoutMapper: { Button, ButtonGroup }}) => {
41-
const { submitting, pristine, validating, form: { submit, reset }, values } = formSpyProps;
41+
const { submitting, pristine, validating, form: { reset }, values } = formSpyProps;
4242
const buttons = {
4343
submit: (
4444
<Button
4545
key="form-submit"
4646
type="submit"
4747
variant="primary"
4848
disabled={ submitting || validating || disableSubmit }
49-
onClick={ submit }
5049
label={ submitLabel }
5150
/>
5251
),

‎packages/react-form-renderer/src/tests/form-renderer/__snapshots__/form-controls.test.js.snap‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -48,12 +48,10 @@ exports[`<FormControls /> should add missing buttons if not defined in button or
4848
<Component
4949
key="form-submit"
5050
label="Submit"
51-
onClick={[Function]}
5251
type="submit"
5352
variant="primary"
5453
>
5554
<button
56-
onClick={[Function]}
5755
type="submit"
5856
variant="primary"
5957
>
@@ -153,13 +151,11 @@ exports[`<FormControls /> should render all controls and with default labels 1`]
153151
disabled={true}
154152
key="form-submit"
155153
label="Submit"
156-
onClick={[Function]}
157154
type="submit"
158155
variant="primary"
159156
>
160157
<button
161158
disabled={true}
162-
onClick={[Function]}
163159
type="submit"
164160
variant="primary"
165161
>
@@ -270,12 +266,10 @@ exports[`<FormControls /> should render buttons in correct order 1`] = `
270266
<Component
271267
key="form-submit"
272268
label="Submit"
273-
onClick={[Function]}
274269
type="submit"
275270
variant="primary"
276271
>
277272
<button
278-
onClick={[Function]}
279273
type="submit"
280274
variant="primary"
281275
>
@@ -359,12 +353,10 @@ exports[`<FormControls /> should render only submit button 1`] = `
359353
<Component
360354
key="form-submit"
361355
label="Submit"
362-
onClick={[Function]}
363356
type="submit"
364357
variant="primary"
365358
>
366359
<button
367-
onClick={[Function]}
368360
type="submit"
369361
variant="primary"
370362
>

‎packages/react-form-renderer/src/tests/form-renderer/__snapshots__/form-information.test.js.snap‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -131,12 +131,10 @@ exports[`<FormControls /> should render with description 1`] = `
131131
<Component
132132
key="form-submit"
133133
label="Submit"
134-
onClick={[Function]}
135134
type="submit"
136135
variant="primary"
137136
>
138137
<button
139-
onClick={[Function]}
140138
type="submit"
141139
variant="primary"
142140
>
@@ -292,12 +290,10 @@ exports[`<FormControls /> should render with title and description 1`] = `
292290
<Component
293291
key="form-submit"
294292
label="Submit"
295-
onClick={[Function]}
296293
type="submit"
297294
variant="primary"
298295
>
299296
<button
300-
onClick={[Function]}
301297
type="submit"
302298
variant="primary"
303299
>
@@ -441,12 +437,10 @@ exports[`<FormControls /> should render without title and description 1`] = `
441437
<Component
442438
key="form-submit"
443439
label="Submit"
444-
onClick={[Function]}
445440
type="submit"
446441
variant="primary"
447442
>
448443
<button
449-
onClick={[Function]}
450444
type="submit"
451445
variant="primary"
452446
>

‎packages/react-form-renderer/src/tests/form-renderer/__snapshots__/form-renderer.test.js.snap‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -787,12 +787,10 @@ exports[`<FormRenderer /> should render form from schema 1`] = `
787787
<Component
788788
key="form-submit"
789789
label="Submit"
790-
onClick={[Function]}
791790
type="submit"
792791
variant="primary"
793792
>
794793
<button
795-
onClick={[Function]}
796794
type="submit"
797795
variant="primary"
798796
>

‎packages/react-form-renderer/src/tests/form-renderer/data-types.test.js‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@ describe('data types', () => {
2828
let initialProps;
2929
beforeEach(() => {
3030
initialProps = {
31-
onSubmit: jest.fn(),
3231
layoutMapper,
3332
formFieldsMapper: {
3433
[componentTypes.TEXT_FIELD]: DataTypeInput,
@@ -62,7 +61,10 @@ describe('data types', () => {
6261
expect(onSubmit).not.toHaveBeenCalled();
6362

6463
input.simulate('change', { target: { value: '123' }});
65-
wrapper.find('button').first().simulate('click');
64+
wrapper.update();
65+
66+
wrapper.find('form').first().simulate('submit');
67+
6668
expect(onSubmit).toHaveBeenCalledWith(expect.objectContaining({
6769
'data-type-text': 123,
6870
}), expect.anything(), expect.anything());
@@ -82,7 +84,7 @@ describe('data types', () => {
8284
const wrapper = mount(<FormRenderer { ...initialProps } onSubmit={ onSubmit } schema={ propSchema } />);
8385
const input = wrapper.find('input');
8486
input.simulate('change', { target: { value: '123' }});
85-
wrapper.find('button').first().simulate('click');
87+
wrapper.find('form').first().simulate('submit');
8688
expect(onSubmit).toHaveBeenCalledWith(expect.objectContaining({
8789
'data-type-text': 123,
8890
}), expect.anything(), expect.anything());
@@ -102,7 +104,7 @@ describe('data types', () => {
102104
const wrapper = mount(<FormRenderer { ...initialProps } onSubmit={ onSubmit } schema={ renderSchema } />);
103105
const input = wrapper.find('input');
104106
input.simulate('change', { target: { value: '123' }});
105-
wrapper.find('button').first().simulate('click');
107+
wrapper.find('form').first().simulate('submit');
106108
expect(onSubmit).toHaveBeenCalledWith(expect.objectContaining({
107109
'data-type-text': 123,
108110
}), expect.anything(), expect.anything());
@@ -122,7 +124,7 @@ describe('data types', () => {
122124
const wrapper = mount(<FormRenderer { ...initialProps } onSubmit={ onSubmit } schema={ childSchema } />);
123125
const input = wrapper.find('input');
124126
input.simulate('change', { target: { value: '123' }});
125-
wrapper.find('button').first().simulate('click');
127+
wrapper.find('form').first().simulate('submit');
126128
expect(onSubmit).toHaveBeenCalledWith(expect.objectContaining({
127129
'data-type-text': 123,
128130
}), expect.anything(), expect.anything());

0 commit comments

Comments
 (0)