Questions tagged [react-final-form]
Subscription-based form state management for React
483
questions
3
votes
2
answers
77
views
Is react-final-form broken in Safari 17?
We are testing a webview that uses react-final-form on the beta release and it appears to intermittently freeze up all UI interactions. This appears to be associated with number of keystrokes or ...
0
votes
0
answers
33
views
react-final-form <Field /> with TypeScript
I'm trying to get my head around react-final-form <Field /> with TypeScript.
Suppose I have following code:
<Field<{ foo1: string }, HTMLElement, { foo: string }>
name="firstName&...
0
votes
1
answer
64
views
How do you register a field with React Final Form with MUI TextField?
I have an MUI TextField (not the mui-rff) that I want to set a touched to when there is an onchange event on the textfield. I tried adding the name attribute to it, but I'm not sure how to register it ...
0
votes
0
answers
28
views
React Final Form: is it possible to submit in edit form even no changes made in fields?
in React Final Form is pristine props can be make it always false? or in the other words is it possible to submit in edit form even no changes made in fields?
I already checking the documentation but ...
0
votes
0
answers
21
views
Prevent rerendering Final Form Field
I've noticed a performance drop in one large form in my react app using FinalForm. Is there a Final Form way of preventing Field rerenders, more specifically rerendering a Field only when some other ...
0
votes
1
answer
91
views
How to change one form from another form. react-final-form
React-final-form has problems with updating one form from another (outside of first) form. Did not find any great solution around. Example: There is 1 and 2 forms. One field from 1 form has to change ...
0
votes
0
answers
19
views
How would I set a input to have a different form state than what the UI displays
I have a standard text input in my code base
I have a use case where I need to call the change function in react final form and set a value, but I need the text value to read something else.
For ...
0
votes
1
answer
67
views
Aliasing React with Preact on specific files?
Currently my project is on Ruby on rails with React frontend(on some parts of the app). Also uses Webpack.
I am trying to use react-final-form(https://final-form.org/react) on just one part of the app,...
0
votes
0
answers
32
views
Warning: Cannot update a component (yyyyy) while rendering a different component (FormSpy). To locate the bad setState() call inside FormSpy
<FormSpy subscription={{ values: true }}>
{({ values, form }) => {
if (values.departamentoNacimiento !== idDepartamento)
{
setIdDepartamento(values.departamentoNacimiento)
form.change('...
0
votes
1
answer
482
views
How to make correct object for zod for schema with Nested input name with react final form?
I have a form and I am mapping through inputs(which the number of inputs can increase or decrease based on user preference). I want to be able to validate the inputs with zod but I'm having alot of ...
1
vote
0
answers
224
views
How to watch an array field in react hook form?
i am migrating an existing complex react app using react-final-form to use react-hook-form and i don't know how to implement something like decorators used in final-form.
For example i have multiple ...
0
votes
0
answers
139
views
Multiselect dropdown in react final form inside Modal
I am using multi select dropdown in react final form using material-ui.
But when I use it inside Modal, it does not take me to the respective element when I type a letter. This works fine with out a ...
0
votes
0
answers
14
views
Upgrading ReduxForms to react final form
`Has anyone upgraded from an older version of redux form to react-final form? We are trying to update our older app and can’t figure out the right way to update the components using reduxForms. Here ...
0
votes
0
answers
38
views
How to create a field (such as a featured flag) that can only be applied to one item in the field array?
We are currently working on migrating our profile editor form from Redux Form to React Final Form. In this, we have a field array representing a list of object values - in this case, a list of ...
0
votes
0
answers
84
views
next.js React Final Form stopping build with Error: useField must be used inside of a <Form> component
I am using react-final-form for my app. The dev server runs fine and works. However, the build process fails on both the login and registration pages. The reason given for this is ...
Error: useField ...
0
votes
0
answers
40
views
How to use custom value in Field react-final-form
I want to use radio field with this object
RadioButton {
id: string;
name: string;
}
So i made Field, that pass only id to native input
<Field {...props} value={value}>
{({ input }) =&...
0
votes
0
answers
25
views
How to show an scrollbar inside react-final-form select
How can achieve a vertical scrollbar inside my box in my react-final-form.
I have used form-control and form-select from bootstrap 5.0
But i can not see the scrollbar in right side of the selectbox.
...
0
votes
0
answers
33
views
Send props In Field react final form
I have this Field in my react final form, i need to pass setstate to storage files before submit the form.
<Field name={`item_lateral[${index}].image_lateral[0].path_image_lateral`}>
{...
0
votes
0
answers
18
views
Clear second drop menu when change the first drop down menu react final form
Hi i would like to achieve in my code:
Form with Options
(this is part of the code....):
<div className="row">
<div className="col-md me-3"> ...
1
vote
0
answers
39
views
How can I share form values between two instances of same form in react-final-form
Lets say I have two child components of the form (react-final-form) and when one updates I want to pass the certain updated values that have same field names to the second one.
So for example if the ...
0
votes
1
answer
44
views
Select options value by default in second select form when selected option in first form
I have this example json:
const json = [
{
"obj1": {
obj1_1: {
"obj1_1Final": 'Hellow"
},
obj1_2: {
...
0
votes
1
answer
36
views
Final form: revalidate form after validator remove
I have a form level validator on my fields and setState function to remove it.
const [validator, setValidator] = useState((value) => {...});
<Field
name="name"
component={...
0
votes
1
answer
429
views
Is there a way to clear a MUI TextField Input from the form.restart() method in React-Final-Form and capture the event?
The form.restart() in my reset button resets all fields states and values as per my understanding of this Final-Form.
The method fires and resets all fields in my form and I can capture the event in ...
3
votes
2
answers
1k
views
How to check if the date has valid format in Yup?
I am using yup to validate the values in the input field:
const dateToCheck = yup
.date()
.nullable()
.transform((curr, orig) => (orig === '' ? null : curr))
.required()
.min(...
0
votes
0
answers
111
views
React final form initialValue clears onchange
I've been using react-final-form a while, and today i got caught up in a problem.
i want to be able to have a initialValue in a input field, and a checkbox next to it that clears the input field.
But ...
1
vote
0
answers
59
views
Why are my submitError's rendering on the second submit instead of the initial submit
I wanted to create a reusable component that could render server side errors if there are validation errors in the form. On the initial submit even if there are errors coming from the server, they ...
1
vote
2
answers
157
views
React Final Form - Radio buttons won't work inside a FieldArray
I have radio button group rendered dynamically using a FieldArray.
<FieldArray name="customers">
{({ fields }) =>
fields.map((name, index) => (
<div key={name}&...
0
votes
1
answer
405
views
How to pass props to component inside Field react final form
I have a form created with react-final-form,
inside i have a field that use a functional component to manage an image file.
I have the component inside the father component, but i think that is not a ...
0
votes
1
answer
134
views
Make API call after form selection with React Final Form
I have a form with two dropdowns. The second dropdown list of options is returned by an API and depends on what the user selected in the first dropdown. How can I do this with React Final Form? ...
1
vote
1
answer
127
views
React Final Form, use <Field/> outside <Form/>
is there a way to use outside but still connected?
I'm getting Uncaught Error: useField must be used inside of a component.
I like to reference the Form in Field component
I'm getting Uncaught ...
0
votes
0
answers
29
views
How do I update a react-final-forms internal state to what my apps state is?
I'm aware of FormSpy to update based on subscriptions to the form's changed input values.
I'm just not 100% sure on implementation for it. I also tried mutations but that didn't update the state ...
0
votes
0
answers
49
views
How to check if there is a duplicated field name within my form before register?
I am trying to identify whether within my react final form I have a duplicated name field and then throw an error. I have tried to use a decorator on registerField() and it seems to work fine, however,...
0
votes
1
answer
60
views
How to use initialValues inside a Wizard with PrefixedField (React Final Form)?
I'm using React Final Form to create a multi-step wizard form.
I need to pass initialValues into my Wizard, which I can using the Field Component.
However, I want to use PrefixedField instead, which ...
0
votes
0
answers
54
views
How can edit an array inside a form with react-final-form and FieldArray
i'm so desperate
I have a form, inside this an array form, created with FielArray, now what I want is to be able to edit this array of the form.
I managed to print the values of the array, but now I ...
0
votes
0
answers
34
views
React Final Form blurring each field
I'm using Final Form arrays to dynamically render custom fields that consist of two text fields, both of which are validated.
I'm not sure how to go about blurring the fields individually. This is ...
0
votes
0
answers
80
views
How to use multiple conditions to validate form with react final form
I have form inside my react app,
And i would like to use this condition to validate the form before send the data to backend.
<div className="card-body">
<h3 className="...
1
vote
0
answers
169
views
React final form- get the actual state to zoom to a dragging element in the form
I'm making a form with dragging boxes. The form was created with react-final-form, to drag elements I'm using- https://dndkit.com, to zoom to element- react-zoom-pan-pinch.
I want to zoom to elements ...
0
votes
0
answers
36
views
Dynamic input in FieldArray
i have form, inside i have this part of code:
<FieldArray name="items_list" component={renderItemList} explicitProp={id}/>
<div className="buttons mb-4 text-...
1
vote
0
answers
299
views
How to pass initial values to Field Array in Final Form
I have a react select using sortable container and the values that are extracted are like:
{
"fruits": [
{
"id": 3,
"value": "vanilla",
...
-1
votes
1
answer
30
views
On submit, my Edit Form flashes initial values then shows updated values?
In my project, I have a React Final Form form for editing an entity. It is first populated with the initial values. You can update the values, then click submit. On submit, it calls a GraphQL mutation ...
0
votes
1
answer
684
views
How to unit test react final form's Field Components?
I am writing a form component using react-final-form library. As component starts growing, I split it into multiple sub components such that parent component has the <Form>{... }</Form> ...
0
votes
1
answer
334
views
React final form with datepicker validation
Is there any way to display error message if the validation on the Field level fails when using react datepicker?
I am using datepicker with react final form:
const DatePickerAdapter = ({ input: { ...
1
vote
0
answers
326
views
React Final Form FieldArray validation on form.restart
I have a form with a fields array. At the bottom of the form there is a button that deletes all list items (in fact, it does form.restart).
When deleting fields, the validation of each field is ...
1
vote
1
answer
685
views
Multiple validation to same field in react final form
Is there a way to add multiple validation to single field in React Final Form? Something like:
<Field
name='email'
label='email'
validate={[emailValidator, emptyValidator}]
/>
There is ...
1
vote
2
answers
2k
views
React MUI 5 DatePicker with react-final-form not handling keyboard input
I want to first make clear that this question is about the recently-released MUI 5 DatePicker, i.e. from @mui/x-date-pickers. I previously used the KeyboardDatePicker in the older versions of material-...
1
vote
1
answer
282
views
Why List element only gets selected when clicked twice?
I am building a React application and using react-final-form library. I am rendering a select component, but on selecting an item it doesn't get selected. On selecting again, then only it gets ...
0
votes
0
answers
863
views
Final Form - useField hook validator
I am trying to add a form field that is built with useField. I also want to dynamically turn off the required validation depending if the field is disabled or not. Even though the component is being ...
0
votes
1
answer
325
views
React-Final-Form -> Dynamically created from based on data from server
EDIT: THE IDEA BELLOW WORKS
I just noticed that the problem was in . notation of values I used. The path must be correctly converted to the same object structure as in case of tools changeValue).
Also,...
1
vote
1
answer
1k
views
How to set React Final Form values on request and validate after that?
I have kind of a convoluted use case here. I have an API that responds with a JSON that maps to React components, including form fields (their values, validations, etc). Every component in the page ...
0
votes
0
answers
124
views
Duplicate form using react final form
I have a form to add a new product. I would like to allow an user to add a new item by pressing Add another item in the same page. To show the same form duplicated and to be submitted all together.
I'...