20e3963 · bridge · git.iko.soy

git.iko.soy/bridge

fix: final-form-set-field-data was causing a validation loop...

...because final-form re-runs validations unconditionally when a mutator is called, and we were registering warnings within our validators: https://github.com/final-form/final-form/blob/master/src/FinalForm.js#L268

commit20e39633028c74eade90c9480884847d708e457b authorMatt Condon (shrugs) <mattgcondon@gmail.com> dateFri 9 Aug 2019, 18:47 (7 years ago) parent9ba9efe

5 files changed+11−41

compare with master

unifiedsplit

src/form/BridgeForm.js+1−8 src/form/WarningEngine.js−15 src/indigo-react/components/Input.js+2−8 src/indigo-react/components/SelectInput.js+2−8 src/views/Login/Ticket.js+6−2

src/form/BridgeForm.js+1−8

@@ -1,12 +1,10 @@

11import React, { useCallback } from 'react';

22import { Form } from 'react-final-form';

3−import setFieldData from 'final-form-set-field-data';

43import arrayMutators from 'final-form-arrays';

54import { noop } from 'lodash';

76import ValuesHandler from './ValuesHandler';

87import ValidationPauser from './ValidationPauser';

9−import WarningEngine from './WarningEngine';

108

119/**

1210 * BridgeForm adds nice-to-haves for every form in bridge.

@@ -21,7 +19,6 @@ export default function BridgeForm({

2119 onValues,

2220 onSubmit = noop,

2321 afterSubmit = noop,

24− warnings,

2522 ...rest

2623}) {

2724 const _onSubmit = useCallback(

@@ -37,13 +34,9 @@ export default function BridgeForm({

3734 );

3835

3936 return (

40− <Form

41− mutators={{ setFieldData, ...arrayMutators }}

42− onSubmit={_onSubmit}

43− {...rest}>

37+ <Form mutators={{ ...arrayMutators }} onSubmit={_onSubmit} {...rest}>

4438 {formProps => (

4539 <>

46− {warnings && <WarningEngine warnings={warnings} />}

4740 <ValidationPauser />

4841 {children(formProps)}

4942 {onValues && <ValuesHandler onValues={onValues} />}

src/form/WarningEngine.jsdeleted−15

@@ -1,15 +0,0 @@

1−import { useEffect } from 'react';

2−import { useForm } from 'react-final-form';

3−import { map } from 'lodash';

4−

5−export default function WarningEngine({ warnings }) {

6− const form = useForm();

7−

8− useEffect(() => {

9− map(warnings, (warning, name) =>

10− form.mutators.setFieldData(name, { warning })

11− );

12− }, [form, warnings]);

13−

14− return null;

15−}

src/indigo-react/components/Input.js+2−8

@@ -14,6 +14,7 @@ export default function Input({

1414 accessory,

1515 disabled = false,

1616 mono = false,

17+ warning,

1718

1819 // callbacks

1920 onEnter,

@@ -26,14 +27,7 @@ export default function Input({

2627}) {

2728 const {

2829 input,

29− meta: {

30− active,

31− error,

32− submitting,

33− touched,

34− valid,

35− data: { warning },

36− },

30+ meta: { active, error, submitting, touched, valid },

3731 } = useField(name, config);

3832

3933 disabled = disabled || submitting;

src/indigo-react/components/SelectInput.js+2−8

@@ -16,17 +16,11 @@ export default function SelectInput({

1616 mono = false,

1717 options = [],

1818 disabled = false,

19+ warning,

1920}) {

2021 const {

2122 input,

22− meta: {

23− active,

24− error,

25− submitting,

26− touched,

27− valid,

28− data: { warning },

29− },

23+ meta: { active, error, submitting, touched, valid },

3024 } = useField(name, {

3125 type: 'select',

3226 });

src/views/Login/Ticket.js+6−2

@@ -151,14 +151,18 @@ export default function Ticket({ className, goHome }) {

151151 return (

152152 <Grid className={cn('mt4', className)}>

153153 <BridgeForm

154− warnings={warnings}

155154 validate={validate}

156155 onValues={onValues}

157156 afterSubmit={goHome}

158157 initialValues={initialValues}>

159158 {({ handleSubmit }) => (

160159 <>

161− <Grid.Item full as={PointInput} name="point" />

160+ <Grid.Item

161+ full

162+ as={PointInput}

163+ name="point"

164+ warning={warnings.point}

165+ />

162166

163167 <Condition when="useShards" is={false}>

164168 <Grid.Item