I'm looking to set the same field value from two separate fields.
The reason for this is that an additional pop-up modal could allow for more input on the same field in my use case. I have a set of selectable chips which the user can toggle (custom field, works fine). If the user chooses, I'd like them to be able to press a button that says "Add Manually", which will show the same chips and their currently toggled states, as well as a text input box for them to type and choose matches from an autocomplete list, which will add the new chips.
My issue is that I want the user to be able to close the modal where they just added new chips manually, and see the updates in the current chips field on the form. This requires two separate custom formik fields to setFieldValue on the same value set.
Is this possible? I haven't been able to get it to work.
Simplified example without all the modal details:
<View>
<Field
className="custom-select"
name="allergyChips"
component={SelectableChips}
initialChips={values.allergyDisplayChips}
value={values.allergyChips || []}
onChangeChips={(chips) => setFieldValue('allergyChips', chips)}
/>
</View>
<View style={{ margin: 30 }}>
<Field
className="custom-select"
name="allergyChips2"
component={SelectableChips}
onChangeChips={(chips) => setFieldValue('allergyChips', chips)}
/>
</View>
Expected behavior: I'd expect that changing either field should update the chips in the other field. For the chips, I'd expected both to toggle when I click one. I'd expect that this would be the same for text input fields as well, where both would change due to changes in either one.
What I tried: using handleChange instead of setFieldValue, using resetForm with the updated value & setting enableReinitialize={true}.