Questions tagged [react-final-form]

Subscription-based form state management for React

Filter by
Sorted by
Tagged with
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 ...
The Camster's user avatar
  • 1,890
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&...
Hans's user avatar
  • 1,170
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 ...
Jon's user avatar
  • 453
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 ...
otep's user avatar
  • 1
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 ...
Damjan Vučina's user avatar
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 ...
Adi Dasler's user avatar
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 ...
reactdev1231231's user avatar
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,...
su_aseer's user avatar
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('...
JucarMoba's user avatar
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 ...
coder29's user avatar
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 ...
Sneader's user avatar
  • 11
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 ...
Vaishali Kulkarni's user avatar
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 ...
Prem Dahal's user avatar
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 ...
Tay Solis's user avatar
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 ...
Joshua Foxworth's user avatar
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 }) =&...
Nikita Kalinin's user avatar
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. ...
ddaudiosolutions's user avatar
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`}> {...
ddaudiosolutions's user avatar
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"> ...
ddaudiosolutions's user avatar
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 ...
Alex T's user avatar
  • 3,581
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: { ...
ddaudiosolutions's user avatar
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={...
Artem Loginov's user avatar
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 ...
Stuart Barclay's user avatar
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(...
Alex T's user avatar
  • 3,581
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 ...
Johannes Andersson's user avatar
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 ...
Narredondo's user avatar
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}&...
sbedulin's user avatar
  • 4,112
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 ...
ddaudiosolutions's user avatar
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? ...
Cesare's user avatar
  • 9,169
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 ...
idirsun's user avatar
  • 474
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 ...
TigerCode's user avatar
  • 315
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,...
danH's user avatar
  • 105
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 ...
Luis Silva's user avatar
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 ...
ddaudiosolutions's user avatar
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 ...
Damjan Vučina's user avatar
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="...
ddaudiosolutions's user avatar
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 ...
Shan's user avatar
  • 45
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-...
ddaudiosolutions's user avatar
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", ...
Nagween Jaffer's user avatar
-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 ...
Matt Jiang's user avatar
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> ...
Dev9999's user avatar
  • 51
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: { ...
Alex T's user avatar
  • 3,581
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 ...
dyuss's user avatar
  • 11
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 ...
Rojen's user avatar
  • 336
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-...
C. Helling's user avatar
  • 1,394
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 ...
Dev9999's user avatar
  • 51
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 ...
Christopher Townsend's user avatar
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,...
Fis's user avatar
  • 787
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 ...
sbstnssndn's user avatar
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'...
Zenit's user avatar
  • 439

1
2 3 4 5
10