From c625b47dd7d76bb351e081b342be083f826bb8ca Mon Sep 17 00:00:00 2001 From: Sonarly Claude Code Date: Mon, 30 Mar 2026 11:59:55 +0000 Subject: [PATCH] fix: handle undefined draftValue in MultiSelectFieldInput handleCancel MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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`). --- .../ui/meta-types/input/components/MultiSelectFieldInput.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/components/MultiSelectFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/components/MultiSelectFieldInput.tsx index c9aefa38fa0..a11e2cc477f 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/components/MultiSelectFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/components/MultiSelectFieldInput.tsx @@ -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) => {