fix: handle undefined draftValue in MultiSelectFieldInput handleCancel

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`).
2026-03-30 11:59:55 +00:00
1 changed files with 3 additions and 2 deletions
@@ -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) => {