diff --git a/apps/web/components/apps/installation/ConfigureStepCard.tsx b/apps/web/components/apps/installation/ConfigureStepCard.tsx index fa76db0f777084..7b413b831a5821 100644 --- a/apps/web/components/apps/installation/ConfigureStepCard.tsx +++ b/apps/web/components/apps/installation/ConfigureStepCard.tsx @@ -126,7 +126,7 @@ const EventTypeGroup = ({ }: ConfigureStepCardProps & { groupIndex: number; setUpdatedEventTypesStatus: Dispatch>; - submitRefs: Array>; + submitRefs: React.MutableRefObject<(HTMLButtonElement | null)[]>; }) => { const { control } = useFormContext(); const { fields, update } = useFieldArray({ @@ -174,7 +174,9 @@ const EventTypeGroup = ({ return res; }); }} - ref={submitRefs[index]} + ref={(el) => { + submitRefs.current[index] = el; + }} {...props} /> ) @@ -193,17 +195,8 @@ export const ConfigureStepCard: FC = (props) => { keyName: "fieldId", }); const eventTypeGroups = watch("eventTypeGroups"); - const submitRefs = useRef>>>([]); + const submitRefs = useRef<(HTMLButtonElement | null)[]>([]); - submitRefs.current = eventTypeGroups.reduce( - (arr: Array>>, field) => { - const res = field.eventTypes - .filter((eventType) => eventType.selected) - .map((_ref) => React.createRef()); - return [...arr, res]; - }, - [] - ); const mainForSubmitRef = useRef(null); const [updatedEventTypesStatus, setUpdatedEventTypesStatus] = useState( eventTypeGroups.reduce((arr: Array<{ id: number; updated: boolean }[]>, field) => { @@ -245,7 +238,7 @@ export const ConfigureStepCard: FC = (props) => { @@ -258,7 +251,7 @@ export const ConfigureStepCard: FC = (props) => { type="button" data-testid="configure-step-save" onClick={() => { - submitRefs.current.map((group) => group?.map((ref) => ref.current?.click())); + submitRefs.current.forEach((ref) => ref?.click()); setSubmit(true); }} loading={loading}>