diff --git a/frontend/src/component/feature/StrategyTypes/FlexibleStrategy/FlexibleStrategy.tsx b/frontend/src/component/feature/StrategyTypes/FlexibleStrategy/FlexibleStrategy.tsx index d5c50a2d1065..1f1b956c2f8e 100644 --- a/frontend/src/component/feature/StrategyTypes/FlexibleStrategy/FlexibleStrategy.tsx +++ b/frontend/src/component/feature/StrategyTypes/FlexibleStrategy/FlexibleStrategy.tsx @@ -1,4 +1,4 @@ -import { useMemo } from 'react'; +import { useEffect, useMemo } from 'react'; import { Box, styled } from '@mui/material'; import type { IFeatureStrategyParameters } from 'interfaces/strategy'; import RolloutSlider from '../RolloutSlider/RolloutSlider'; @@ -82,7 +82,7 @@ const FlexibleStrategy = ({ return parseParameterString(parameters.stickiness); }, [loading, defaultStickiness, parameters.stickiness]); - const groupId = useMemo(() => { + useEffect(() => { if (!parameters.groupId && !loading) { if (isDefaultStrategyEdit || !featureId) { updateParameter('groupId', ''); @@ -90,9 +90,9 @@ const FlexibleStrategy = ({ updateParameter('groupId', featureId); } } + }, [isDefaultStrategyEdit, featureId, loading]); - return parseParameterString(parameters.groupId); - }, [parameters.groupId, isDefaultStrategyEdit, featureId, loading]); + const groupId = parseParameterString(parameters.groupId); if (loading) { return ; @@ -126,7 +126,10 @@ const FlexibleStrategy = ({ value={groupId} disabled={!editable} onChange={(e) => - updateParameter('groupId', e.target.value) + updateParameter( + 'groupId', + parseParameterString(e.target.value), + ) } data-testid={FLEXIBLE_STRATEGY_GROUP_ID} error={Boolean(errors?.getFormError('groupId'))}