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:
Clayton
2026-01-30 11:12:43 -06:00
committed by GitHub
parent 1fea3f8228
commit b8d85e0b26
3 changed files with 28 additions and 12 deletions
@@ -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 (