final-form / react-final-form-arrays Goto Github PK
View Code? Open in Web Editor NEWA component for rendering and editing arrays 🏁 React Final Form
License: MIT License
A component for rendering and editing arrays 🏁 React Final Form
License: MIT License
trying to do yarn install of 1.0.1 it says it cannot find.. Did this release happen properly or is busted like final-form releases ?
Bug report, maybe? Docs?
The component I pass to <FieldArray>
in the component
prop receives a prop called value
. Is this a public/stable API?
I don't see this in FieldArrayRenderProps
, either in the docs or the flow types.
Here's the FieldArray example, adapted to show I can read from the value
prop.
https://codesandbox.io/s/n1nn8rpjwl
Same as the example codesandbox.
Ultimately what I'm looking for is a way to read from the FieldArray programmatically/imperatively.
In redux-form I could use .get()
and/or .getAll()
, but this isn't available in react-final-form
.
Any guidance?
Feature Request: Upgrade react-final-form
to v5.
The previously exported
withReactFinalForm
HOC has been removed. Now you should use theuseForm()
hook if you'd like to get the 🏁 Final Form instance out of the context.
react-final-form-arrays
cannot be used with v5 of react-final-form
. Must downgrade to v4 until library is updated.
Ability to use react-final-form-arrays
with upgrade to new v5 react-final-form
library.
n/a - for all environments
Breaking change would mean react-final-form-array
also needs a breaking change version bump.
Hello, I have 1 suggestion, when I push value, can't focus new element, because it is not created yet
fields.push({id: '', name: '', lastName: ''})
setTimeout(()=>{
form.focus(`persons[${fields.value.length}].id`)
},200)
this is how it works now, but obviously, its really bad solution, if fields.push had a callback, it would be nice
just wondering, why fields.push acts like async?
Bug Report
As title, it seems the dirtySinceLastSubmit
in final form FieldState
is missing when reporting to meta
of FieldArray
. Line 196.
Or do I misunderstand something that the meta
should not contains dirtySinceLastSubmit
? 🤔
<FieldArray>
gets re-rendered whenever anything in the form changes, not just the array and its contents.
It should work like a regular <Field>
. That is, only subscribe to changes in the array (and still ignore contents of the array, apart from item additions/removals/reorders.
See https://codesandbox.io/s/yklq254pr1. Open console, add one customer and start editing company name. The whole array will be re-rendered on each key press, as indicate by messages in the console.
"final-form": "4.5.2",
"final-form-arrays": "1.0.4",
"react-final-form": "3.3.1",
"react-final-form-arrays": "1.0.4",
Bug
When using the unshift
mutator to add an item to the beginning of an array, the touched state from the item previously at index zero (if one exists) is maintained.
I would expect the item that was added to the beginning of the array to have a touched state of false.
N/A, but I will happily provide one if needed.
N/A
Bug report. (Debatably so).
react-lifecycle-compat
is inlined into the ES Module build. (Also the case for the commonjs build).
react-lifecycle-compat
is imported via import
or require
(for the module build and commonjs builds, respectively).
Latest React Final Forms Array, Final Form Arrays, and Final Form.
For reasons outlined in reactjs/react-lifecycles-compat#31, I'm using react-final-form-arrays with Preact, and I'm going to need to shim react-lifecycle-compat
to something else. Difficult to do that when it is inlined :)
Request
There is only one simple example, which is outdated (versions are old)
Having good documented/explained examples. Covering more complex cases like: using render component, that is able to read array property in componentDidMount and update it if there is missing value. The community support in StackOverflow is really bad
This is a bug report.
I cannot limit how many entries the user can push into an array. For instance, adding a conditional clause to a button's onClick
handler doesn't always work. The problem appears when there is a high CPU utilization and several clicks can be made before a render.
I created a sandbox that shows off the problem. However, to actually see the issue you would probably need to use CPU throttling. Also, you may need to click like crazy. 😄
There should be a way to consistently limit how many fields can be added.
https://codesandbox.io/s/2zjl0w9l3n
Just the "standard" one, like in the sandbox.
I assume the cause of this problem is that .push()
is asynchronous. So multiple calls will get queued and, on a system with limited CPU power, may get executed before the next render gets finished. And the value of fields.length
is only updated after render.
I'm not sure what the solution could be. Maybe provide something like an .update()
method, which could be used like so:
onClick={() => fields.update(fields => {
if (fields.length < 5) {
fields.push('foo');
}
})}
I can see that this issue is probably very niche. But it makes me uneasy that my users might get invalid UI (and/or any bugs that might come from e.g. sending too many fields to an API) just because they're installing an update on their computer at the same time or something.
It's also really not straightforward to get around this. For instance, the API doesn't provide a .slice()
method for when we want to display only X entries.
@erikras
This function is used to determine whether the fields are pristine or not, so if we have initial values and current form values - [] and [{...},{...}]
, it shows that the values are pristine.
Could you please clarify the reason why it returns true
in case of no callback is provided? I think it would be better to write it in the docs because it's quite confusing, I have expected it working this way - 'return this.props.a === this.props.b' by default instead of returning true when the custom callback is not provided, thanks!.
'
A bug.
Submit error is matched with array field - when the field is removed, submit error is also removed
Forked from offical example:
"dependencies": {
"styled-components": "2.2.4",
"react-final-form-arrays": "1.0.0",
"react-final-form": "1.1.1",
"react-dom": "16.2.0",
"react": "16.2.0",
"final-form-arrays": "1.0.0",
"final-form": "1.2.1"
}
Locally:
"final-form": "^4.1.0",
"final-form-arrays": "^1.0.4",
...
"react-final-form": "^3.0.5",
"react-final-form-arrays": "^1.0.3",
I believe this is a bug, but it is possible that I am not understanding something.
When using a FieldArray
, push
, and remove
you can end up with a dirty form, when I don't think it should be dirty.
I forked the Simple Demo: https://codesandbox.io/s/32p402x3om
Add Customer
X
to remove the just added field.The form stays dirty, but I would expect it to be back to pristine.
https://codesandbox.io/s/32p402x3om
React Final form. Mac OSX Chrome.
Thank you for a great library. Let me know if I can provide more information.
bug report
If remove array item other items will be changed
Other items should not be changed
https://codesandbox.io/s/7z85xxz8mx
try to remove the first row
"final-form": "4.7.3",
"final-form-arrays": "1.0.4",
"final-form-calculate": "1.2.0",
"react": "16.4.0",
"react-dom": "16.4.0",
"react-final-form": "3.5.1",
"react-final-form-arrays": "1.0.4",
Bug report
I have a form with the following characteristics:
My initial values are as follows:
{
apis: []
}
<Form
onSubmit={this.handleSubmit}
validate={this.handleValidate}
validateOnBlur={true}
initialValues={{
apis: []
}}
keepDirtyOnReinitialize={true}
mutators={mutators}
subscription={{
value: true,
submitting: true,
validating: true,
}}
render={renderProps => (
<React.Fragment>
<FormDebugger form={formName} />
{render(renderProps)}
<FormSpy
subscription={formSpySubscription}
onChange={this.handleSubmitSuccess}
/>
</React.Fragment>
)}
/>
<FieldArray name="apis">
{({ fields }) => (
<React.Fragment>
<FormControl className={classes.inputLabel}>
<InputLabel htmlFor="api">Select an API</InputLabel>
<Select
value={selected}
onChange={this.handleChange}
>
<MenuItem key="item" value={null}>
Select an API
</MenuItem>
{Object.values(apiConstants)
.filter(
ky => !values.apis.find(el => el.api === ky.value)
)
.map(el => (
<MenuItem key={el.value} value={el.value}>
{el.key}
</MenuItem>
))}
</Select>
</FormControl>
<IconButton onClick={this.handleSelect(fields)}>
<PlusIcon />
</IconButton>
<Table>
<TableBody>
{fields.map((name, index) => (
<TableRow key={name}>
<TableCell component="th" scope="row">
<Field
name={`${name}.api`}
readOnly
component={TextInput}
/>
</TableCell>
<TableCell>
<Field name={`${name}.value`} component={TextInput} />
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</React.Fragment>
)}
</FieldArray>
When I select an item in the Select component a state
change occurs and the entire form resets with keepDirtyOnReinitialize=false
or it keeps the changes with keepDirtyOnReinitialize=true
but after adding a first api
, the second state
change causes the api[0]
to be set to undefined
.
It should not reset form state on a state change.
"node": "8.12.0",
"react": "16.6.0",
"final-form": "4.11.0",
"final-form-arrays": "1.1.1",
"react-final-form": "4.0.2",
"react-final-form-arrays": "2.0.1",
field.move
causes an error at the getValidators function when applied to two objects with different fields
See the demo: https://codesandbox.io/s/x94j811oj4
Click a swap
button
To swap objects with no error
See the CodeSandBox link
When a form has keepDirtyOnReinitialize
and there is a rerender, pristine will change to false
If nothing changed pristine should stay true.
https://codesandbox.io/s/q9r4r2o2k6
Field
component has the parse
prop that allows authors to change the value before storage. That being said, FieldArray
does not have the same prop and makes it difficult to parse out empty items. This will need to be done after submitting which is not ideal.
Thoughts or ideas?
A Bug report
The package.json allows a peer of react 15, but it does not work with React 15.
The simple example fails with
Invariant Violation
ReactFinalFormFieldArray(4.2.0)(undefined).render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.
It works
https://codesandbox.io/s/olq4xrrz05
"react-final-form-arrays": "1.0.3",
"react-final-form": "3.1.0",
"react-dom": "15.6.2",
"react": "15.6.2",
"final-form-arrays": "1.0.4",
"final-form": "4.2.0"
Bug
If I change any field in a FieldArray, the state of the parent FieldArray changes to dirty and stays dirty even after reverting to the original state.
The top level FieldArray should revert to pristine state if the fields are returned to their original state.
I'd be happy to provide one if needed.
https://github.com/final-form/react-final-form-arrays/blob/master/src/FieldArray.js#L78
Looking at where the FieldArray is registered, I see there is no equality comparator passed which would mean it defaults to a ===
check which would fail for an array.
I added a small snippet to enable addition of custom field level comparator to compare the arrays in my fork here: https://github.com/anant-singh/react-final-form-arrays/blob/dirty-field-check/src/FieldArray.js#L69-L88
Hi,
I'm not sure if this is a bug or an issue on my end, so I'm crossposting my stackoverflow post here - https://stackoverflow.com/questions/48520222/how-to-add-array-field-in-final-form
In short, it looks like the FieldArray field is returning a different function (versus a normal field), which is causing the runFieldLevelValidation function to cause an error.
Thanks in advance!
As you can see the validation is returning correctly, but the form errors are not showing for the field array.
Try typing in a first name.
Also try adding 6 customers, each with just a last name. You only get 3 form errors
I'd like to have an example using id as key instead of name, to prevent an error to display close to the wrong field for instance.
The basic array example is working fine because there is no validation, but if we add validation to this form, it would be buggy as we use "name" as key prop in the loop.
We should probaly add a more real worl example with validation and then use a generated id (like Math.random.toString())
Thank you @erikras
Looks like react-final-form-arrays v2.0.1 not working with react-final-form v3.6.7 (react-final-form-arrays v1 works good)
Bug
Update method exists for fields but is not declared in typings file
update must be declared in typing file
bug report
Have a form that has a FieldArray in it. The form has initialValues set for the array.
If you use field.remove(index) to remove a row from the FieldArray, it does not make the parent form dirty.
This is an issue where the disabled of the submit button on the form is tied to "pristine".
The final form documentation at https://github.com/final-form/react-final-form-arrays#simple-example has a link to a codesandbox at https://codesandbox.io/s/kx8qv67nk5.
In this example, if you insert the following in the <Form>
tag:
initialValues={{ company: 'MinuteMe.com', customers: [ { firstName: 'Simon', lastName: 'Steele' } ] }}
You will see the form Submit button is immediately disabled - form is pristine.
Delete the Customer row, and form becomes dirty - Submit button is enabled.
NOW... This sandbox uses old versions of the libraries.
I am using newer versions, per this sandbox https://codesandbox.io/s/p34l93w81j. NOTE this sandbox already has my initialValues entered.
See that the same outcome is not achieved by deleting the row! The form is still dirty even though the row was removed.
Expected behaviour is that the form should be marked 'dirty' when the array row is removed.
See above.
The version that fails (per sandbox link above):
"react-final-form-arrays": "1.1.0",
"react-final-form": "3.6.7",
"react-dom": "16.6.0",
"react": "16.6.0",
"final-form-arrays": "1.1.0",
"final-form": "4.10.0"
I believe this is a bug.
After you add destroyOnUnregister and set it to true, fields.remove(index) stops working.
After you press remove button on item, fields.remove(index) actually remove an item.
https://codesandbox.io/s/21r85zk67r
Dependencies:
final-form: 4.8.3,
final-form-arrays: 1.0.4,
react-final-form: 3.6.2
react-final-form-arrays: 1.0.6
Browsers: Firefox, Chrome, Safari
Thank you for this top tier form library, ask anything if you need.
bug report
FieldArrayProps is included from final-form and throws an error
/node_modules/final-form/dist/index has no exported member 'FieldArrayProps'
Should not throw Typescript exception, but it looks like FieldArrayProps does not exist in https://github.com/final-form/final-form/blob/master/src/index.d.ts
Eh, this feels kind of somewhere in the middle.
FieldArray extends React.PureComponent.
FieldArray extends React.Component.
N/A
N/A
For the reasons discussed in final-form/react-final-form#150, I'd like to see parity across all react-final-form*
packages.
The tl,dr: I have external state I feed into my FieldArray render component. I also have to explicitly pass this state to FieldArray as a prop, so the component re-renders.
hey
i have a fieldArray like this
<FieldArray name="exb_set">
{({ fields }) =>
<React.Fragment>
{fields.map((name, index) => (
<Exhibition
key={name}
name={name}
index={index + 1}
onRemoveClick={() => fields.remove(index)}
input={this.AdaptedInput}
radio={this.AdaptedRadio}
textarea={this.AdaptedTextarea}
LabelRequired={this.LabelRequired}
PushArt={push}
/>
))}
<Col lg={12} md={12} sm={12} xs={12}>
<div className="addSectionButton">
<button
type="button"
className=""
onClick={() => this.addExhibition(fields.push, fields.name, 'Exb', **'fields.index'**
)}>
<i></i>
<span>اضافه کردن نمایشگاه</span>
</button>
</div>
</Col>
</React.Fragment>
}
</FieldArray>
when i push fields i need to pass the current Field Index to AddExhibition() how can i do this?
First off, thanks so much for all of the amazing work you have done with React Final Form (as well as its predecessors).
This is a potential bug report
I have an interesting issue where I have abstracted some of the React Final Form (RFF) logic into a higher-order-component called withFormHandler
that wraps other components that are just the form inputs. Data handling (loading, processing submissions and resets) and form presentation (such as in a modal window) is controlled by the component that loads the form. This allows me to reuse all of my RFF boilerplate code with multiple forms.
One of these forms needs to dynamically create new rows of inputs for adding price modifiers (surcharges, discounts, taxes, etc) to a product, and I was looking to use React Final Form Arrays to do so, much like the how the simple example adds customers when you click a button. But because I don't require FieldArrays
in every form, they are not loaded as part of the boilerplate, and are instead passed through from the parent component.
The actual problem is that when I attempt to use the mutators.push
function, I receive the following error:
TypeError Cannot read property 'changeValue' of undefined
I have recreated a stripped down version of my setup in a sandbox: https://codesandbox.io/s/nn6jj4nj3p
If you look at the console output, you will see that the mutators appear to be getting passed through to my form, and the error is occurring because _ref2
in the push function is undefined:
var push = function push(_ref, state, _ref2) {
var name = _ref[0],
value = _ref[1];
var changeValue = _ref2.changeValue; // <== this line go boom
changeValue(state, name, function (array) {
return array ? [].concat(array, [value]) : [value];
});
};
So I don't know if the error is happening because of something I have set up incorrectly, or because this is an actual bug.
for mutators.push
to not throw an error.
https://codesandbox.io/s/nn6jj4nj3p
Local:
"react": "^16.6.0",
"react-dom": "^16.6.0",
"final-form": "^4.11.0",
"final-form-arrays": "^1.1.2",
"react-final-form": "^4.0.2",
"react-final-form-arrays": "^2.0.1",
OS: Windows 10
Browser: Chrome, FF
Node: 10.15.1
Thanks in advance for any and all help with regards to this issue
I have a lot of forms in expansion panel and all of them have arrays in them. I am seeing significant performance impact . On further investigation looks like Chrome performance timeline tool is pointing towards react-final-form-arrays.es.js:289
which is significantly slowing down user experience . From the time user clicks and the changes show up on screen is a lot.
@erikras Do you have any thoughts on how I can improve the experience.
Is there a way to update the value of a line ?
Now I'm using :
let guestCopy = fields.value[index];
guestCopy.bookingOwner = true;
fields.remove(index);
fields.insert(index, guestCopy);
But it's a little bit dirty
Any thoughts on how I can resolve this ? The FieldArray field is just function. And using that in my form.
Warning: Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component. This is a no-op.
Please check the code for the ReactFinalFormFieldArray(4.2.0)(undefined) component.
👋 Hey, thanks for taking an interest in making 🏁 React Final Form Arrays!
After trying other form library i can definitely conclude It is near perfect library for forms, just some edges to be sorted out.
feature request or maybe a bug report
There is no specification on how to use final-form-calculate or more specifically decorators with array-form
exposing decorator api to for array form
n/a
applicable to all versions
n/a
Bug
https://codesandbox.io/s/46ozq77v7
Type "test" or "fail" in Company, then submit
errors.customers[ARRAY_ERROR]
is available somewhere in render props
Note: these props do get flagged
"invalid": true,
"submitFailed": true,
However I dont see
"submitError": [],
And an error
prop seems to be missing
Code Sandbox has deps lists as 4.4.0
However in render props I see, not sure whats going on there
"__versions": {
"final-form": "4.3.1",
"react-final-form": "3.1.5"
}
Feature request
Currently it's not possible to set (in my case) custom isEqual function for FieldArray. I would like to detect changes with deepEquals to know whether something has changed. Now as I understand it's not possible.
With the latest update all validation breaks on Field Arrays. Only thing changed in entire project is the update of these 2 packages. If I remove those packages and do nothing else, it all works again. I would like to be able to use the new form property in onSubmit so I would like to update.
Works
"final-form": "^1.3.5",
"react-final-form": "^1.2.1",
Doesn't work
"final-form": "^3.0.0",
"react-final-form": "^2.1.1"
Bug report
meta.dirtySinceLastSubmit
is not updated after fields.push
or fields.remove
call. Though not tested yet, I doubt the same problem exists in other fields methods.
(See sandbox link)
Expect the habits
field array to have meta.dirtySinceLastSubmit === true
https://codesandbox.io/s/upbeat-pine-23rt4
when moving a field in a array from position 0 to lets say position 2 and then type in the input on position 2, the value of the input in position 0 will be updated instead of active input on position 2.
To update the value of the current active input
https://codesandbox.io/s/oo367849lq
"dependencies": {
"styled-components": "2.2.4",
"react-final-form-arrays": "2.0.1",
"react-final-form": "4.0.1",
"react-dom": "16.6.3",
"react": "16.6.3",
"final-form-arrays": "1.1.0",
"final-form": "4.11.0"
}
Bug
They typescript typings for the meta object currently list error as a boolean, but the docs suggest it should be any to match the final-form version. It looks like initial and submitError are also booleans as well.
I'm not sure if this is intended as I've only just started using the library, but from the examples it doesn't look like it should be a boolean. Sorry if I've made a mistake.
The type should probably be any.
Warning: As of React Final Form v3.3.0, props.mutators is deprecated and will be removed in the next major version of React Final Form. Use: props.form.mutators instead. Check your
Bug Report.
Props isEqual is missing in types for FieldArrayProps. Line 45
I think it's a bug (but might be simply a wrong behavior from my point of view)
All the already existing values (fields) within the FieldArray
become dirty when we add a value to the beginning of the array (with unshift
or insert
functions). It does occur only in case of an initialValues
prop is provided to the Form
component. If no initialValues
is provided, adding a new value does not set the already existing ones as dirty.
Furthermore, this does not occur if adding a value at the end of the array.
Whatever method we use (push, unshift, insert) and to whatever index of the array we add the new value, the dirty state of the existing values should stay the same. The new value should not be dirty.
I used the 'Simple Example' from the doc and simply added a borderColor: orange
style to the input if dirty.
Example with initialValues
(just click on "Add customer" button) -> new value and existing ones become dirty: https://codesandbox.io/s/q1367y759. If you add multiple values, it becomes even more inconsistent.
Same example but without initialValues
(works fine): https://codesandbox.io/s/1rw4o33r37
With initialValues
but now using the push method. If you add a value without removing anything, the new value is not dirty. But if first you remove a value (by clicking on "Remove Customer" button) and then click on "Add Customer" button, the new value is dirty: https://codesandbox.io/s/k9n9l1l1o5
Same as in the example.
If it's indeed something to should be fixed, I would be happy to help out (but will certainly need some guidance).
Thanks for the amazing work 😍
Follow discussion here: #3 (comment)
When mixed field with field arrays, the form cannot submit due to errors
object can never be empty ie.
Form errors:
{
"customers": [
{}
]
}
I understand the reason for field arrays keys here, but I have to write workarounds such as:
onSubmit = () => {
this.formEl.dispatchEvent(new Event('submit')); // trigger final-form submit
this.submit(); // check if "errors.customers" array is full of empty object and submit
}
Just an idea - could we expose validation function (the function which checks for form errors then execute props.onSubmit()
) to make it more flexible for this usecase?
Its an observation that some performance relevant behaviour has changed between the documentation sandbox example and current library versions.
Whenever one row of the array is modified, the whole form is rerendered.
Example: https://p41myp2q.codesandbox.io/
This is a fork of the official example, but with updated dependencies.
This can easily be observed when activating highlight updates
in the React chrome extension
Only the relevant row should be rerendered and not trigger a rerender for all fields.
Example: https://kx8qv67nk5.codesandbox.io/
New dependencies, where the whole Form is rerendered: https://p41myp2q.codesandbox.io/
Original Example from documentation, where only the modified row is updated: https://kx8qv67nk5.codesandbox.io/
react-final-form-array
and final-form-array
to 1.0.0 does not change this behaviourfinal-form
to 3.1.0
and react-final-form
to 2.2
does fix the problem--> Maybe this behaviour was introduced by Final Form 4.x
or react final foem 3.x
Bug report
When I try to Drag and Drop group of Fields with conditions to be displayed or not in a FieldArray, there is an error happening: "Cannot read property 'active' of undefined"
If you try to reproduce it from the sandbox linked below:
The expected behavior is to be able to move Fields that have Conditions Fields inside
bug report
final-form-arrays
provides update
method but it's not documented in react-final-form-arrays
.
All methods provided by final-form-arrays
are listed here in the documentation.
n/a
n/a
Link to the update
method https://github.com/final-form/final-form-arrays#formmutatorsupdatename-string-index-number-value-any--void
Currently FieldArrayRenderProps.fields
gets length
from FieldState
where it is optional: length?: number
. From the code, it looks like it is expected to always be a number
. With it being optional you end up needing to do things like fields.length && fields.length > 1
if you want to see if there's more than one field. If you agree, I'd be happy to submit a PR
Version 2.0.2 has a FieldArrayProps is not defined
error, which is not there in 2.0.1
Fork of the Simple Example, with the latest version of react-final-form-arrays: https://codesandbox.io/s/lyrp6961jq
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.