fix: prevent default object re-selection in relation field form (#17313)
Fixes #17111 ### Problem When creating a Relation field, after deselecting the pre-selected default object (e.g., Company) and selecting a different object (e.g., Opportunity), both objects would end up being selected, showing "2 Objects" instead of just the newly selected one. ### Root Cause The `initialMorphRelationsObjectMetadataIds` array was being recreated on every component render, causing react-hook-form's `Controller` to treat the `defaultValue` prop as a new value and re-apply it after user changes. ### Solution 1. **Memoized the initial value**: Used `useMemo` to ensure `initialMorphRelationsObjectMetadataIds` has a stable reference across renders 2. **Added initialization guard**: Used `useEffect` with a `useRef` flag to ensure the default value is only set once during component mount 3. **Maintained Controller defaultValue**: Kept the `defaultValue` prop on the Controller, which now works correctly with the stable memoized value ### Changes - `SettingsDataModelFieldRelationForm.tsx`: Added memoization and initialization guard to prevent default value re-application --------- Co-authored-by: Etienne <45695613+etiennejouan@users.noreply.github.com>
This commit is contained in:
+9
-4
@@ -17,6 +17,7 @@ import { SettingsTextInput } from '@/ui/input/components/SettingsTextInput';
|
||||
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
|
||||
import styled from '@emotion/styled';
|
||||
import { useLingui } from '@lingui/react/macro';
|
||||
import { useMemo } from 'react';
|
||||
import { isDefined } from 'twenty-shared/utils';
|
||||
import { RelationType } from '~/generated-metadata/graphql';
|
||||
|
||||
@@ -114,10 +115,14 @@ export const SettingsDataModelFieldRelationForm = ({
|
||||
relationType: initialRelationType,
|
||||
});
|
||||
|
||||
const initialMorphRelationsObjectMetadataIds =
|
||||
initialRelationObjectMetadataItems.map(
|
||||
(relationObjectMetadataItem) => relationObjectMetadataItem.id,
|
||||
);
|
||||
const initialMorphRelationsObjectMetadataIds = useMemo(
|
||||
() =>
|
||||
initialRelationObjectMetadataItems.map(
|
||||
(relationObjectMetadataItem) => relationObjectMetadataItem.id,
|
||||
),
|
||||
[initialRelationObjectMetadataItems],
|
||||
);
|
||||
|
||||
const isMobile = useIsMobile();
|
||||
|
||||
return (
|
||||
|
||||
Reference in New Issue
Block a user