vynte-infra/twenty
2
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: handle undefined draftValue in MultiSelectFieldInput handleCancel

Browse Source 
https://sonarly.com/issue/6704?type=bug

Clicking outside a MULTI_SELECT field input on the opportunities page throws an error because the cancel handler attempts to persist an undefined draft value, which fails the MULTI_SELECT type validation.

Fix: In `MultiSelectFieldInput.tsx`, the `handleCancel` callback (triggered on click-outside or Escape) calls `onSubmit?.({ newValue: draftValue })`. The `draftValue` comes from a Jotai component state atom that defaults to `undefined`. When the user opens a MULTI_SELECT dropdown and clicks outside without making any selection change, `draftValue` can be `undefined` — either because the draft initialization didn't complete or because of a component instance ID mismatch.

The `undefined` value then flows to `usePersistField`, where `isFieldMultiSelectValue(undefined)` returns `false` (the Zod schema requires `array | null`), causing the "Invalid value to persist" error.

**Fix:** Added `fieldValues` (the actual persisted record store value) as a fallback via `draftValue ?? fieldValues`. The `fieldValues` from `useMultiSelectField()` is already validated through `isFieldMultiSelectValue` and will always be either a valid string array or `null` — both of which pass the MULTI_SELECT type guard in `usePersistField`.

This matches the semantic intent: on cancel, persist whatever the user selected (draft), or if no draft exists, persist the current stored value (a no-op since `isDeeplyEqual` will short-circuit in `usePersistField`).
This commit is contained in:
Sonarly Claude Code
2026-03-30 11:59:55 +00:00
parent cb85a1b5a3
commit c625b47dd7
1 changed files with 3 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/components/MultiSelectFieldInput.tsx
+3 -2
View File
@@ -11,7 +11,8 @@ import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/com
import { useContext } from 'react';
export const MultiSelectFieldInput = () => {
const { fieldDefinition, draftValue, setDraftValue } = useMultiSelectField();
const { fieldDefinition, fieldValues, draftValue, setDraftValue } =
useMultiSelectField();
const { addSelectOption } = useAddSelectOption(
fieldDefinition?.metadata?.fieldName,
);
@@ -38,7 +39,7 @@ export const MultiSelectFieldInput = () => {
);
const handleCancel = () => {
onSubmit?.({ newValue: draftValue });
onSubmit?.({ newValue: draftValue ?? fieldValues });
};
const handleAddSelectOption = (optionName: string) => {