From e16d09ce66a19bdd2b7cfbdd12395fa38b8671e2 Mon Sep 17 00:00:00 2001 From: Darin McLain Date: Thu, 12 Jan 2023 21:22:35 -0500 Subject: [PATCH 1/2] Added a condition with the isNew flag in the handleChange event for the Name input field --- src/components/flags/FlagForm.tsx | 5 +++-- src/components/segments/SegmentForm.tsx | 5 +++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/flags/FlagForm.tsx b/src/components/flags/FlagForm.tsx index dbff644..a243e8b 100644 --- a/src/components/flags/FlagForm.tsx +++ b/src/components/flags/FlagForm.tsx @@ -95,8 +95,9 @@ export default function FlagForm(props: FlagFormProps) { // check if the name and key are currently in sync // we do this so we don't override a custom key value if ( - formik.values.key === '' || - formik.values.key === stringAsKey(previousName) + isNew && + (formik.values.key === '' || + formik.values.key === stringAsKey(previousName)) ) { formik.setFieldValue( 'key', diff --git a/src/components/segments/SegmentForm.tsx b/src/components/segments/SegmentForm.tsx index 287bf09..2564562 100644 --- a/src/components/segments/SegmentForm.tsx +++ b/src/components/segments/SegmentForm.tsx @@ -99,8 +99,9 @@ export default function SegmentForm(props: SegmentFormProps) { // check if the name and key are currently in sync // we do this so we don't override a custom key value if ( - formik.values.key === '' || - formik.values.key === stringAsKey(previousName) + isNew && + (formik.values.key === '' || + formik.values.key === stringAsKey(previousName)) ) { formik.setFieldValue('key', stringAsKey(e.target.value)); } From 9c305b38f09f7b0269bec8f51bcbf6b178ab3c2e Mon Sep 17 00:00:00 2001 From: Darin McLain Date: Thu, 12 Jan 2023 23:20:36 -0500 Subject: [PATCH 2/2] Removed selectedMatchType state variable, and converted the initialValue to be what the state used to be, and use formik's setFieldValue to update the matchType value. The error was being caused by the initialValue for matchType being a state variable and it would reset the form if it changed when creating a segment --- src/components/segments/SegmentForm.tsx | 17 +++++------------ 1 file changed, 5 insertions(+), 12 deletions(-) diff --git a/src/components/segments/SegmentForm.tsx b/src/components/segments/SegmentForm.tsx index 2564562..2f701a9 100644 --- a/src/components/segments/SegmentForm.tsx +++ b/src/components/segments/SegmentForm.tsx @@ -1,5 +1,4 @@ import { Form, Formik } from 'formik'; -import { useState } from 'react'; import { useNavigate } from 'react-router-dom'; import * as Yup from 'yup'; import Button from '~/components/forms/Button'; @@ -34,12 +33,7 @@ export default function SegmentForm(props: SegmentFormProps) { const navigate = useNavigate(); const { setError, clearError } = useError(); - const [selectedMatchType, setSelectedMatchType] = useState( - segment?.matchType || ('ALL_MATCH_TYPE' as SegmentMatchType) - ); - const handleSubmit = (values: ISegmentBase) => { - values.matchType = selectedMatchType; if (isNew) { return createSegment(values); } @@ -50,7 +44,7 @@ export default function SegmentForm(props: SegmentFormProps) { key: segment?.key || '', name: segment?.name || '', description: segment?.description || '', - matchType: selectedMatchType + matchType: segment?.matchType || ('ALL_MATCH_TYPE' as SegmentMatchType) }; return ( @@ -105,7 +99,6 @@ export default function SegmentForm(props: SegmentFormProps) { ) { formik.setFieldValue('key', stringAsKey(e.target.value)); } - formik.handleChange(e); }} /> @@ -149,13 +142,13 @@ export default function SegmentForm(props: SegmentFormProps) { name="matchType" type="radio" className="h-4 w-4 border-gray-300 text-violet-400 focus:ring-violet-400" - onChange={(e) => { - formik.handleChange(e); - setSelectedMatchType( + onChange={() => { + formik.setFieldValue( + 'matchType', matchType.id as SegmentMatchType ); }} - checked={matchType.id === selectedMatchType} + checked={matchType.id === formik.values.matchType} value={matchType.id} />