Repository: Infisical/infisical
File: frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/ChecklySyncFields.tsx (TypeScript)

Code before:
                const v = option as SingleValue<TChecklyAccount>;
                onChange(v?.id ?? null);
                setValue("destinationConfig.accountName", v?.name ?? "");
              }}
              options={accounts}
              placeholder="Select an account..."
              getOptionLabel={(option) => option.name}
              getOptionValue={(option) => option.id}
            />
          </FormControl>
        )}
      />

      <Controller
        name="destinationConfig.groupId"
        control={control}
        render={({ field: { value, onChange }, fieldState: { error } }) => (
          <FormControl
            isError={Boolean(error)}
            errorText={error?.message}
            label="Select a group"
            isOptional
            helperText="If provided, secrets will be scoped to a check group instead"
            tooltipClassName="max-w-md"
          >
            <FilterableSelect
              isLoading={isGroupsLoading && Boolean(connectionId)}
              isDisabled={!connectionId}
              value={groups.find((p) => p.id === value) ?? null}
              onChange={(option) => {
                const v = option as SingleValue<TChecklyAccount>;
                onChange(v?.id ?? null);
                setValue("destinationConfig.groupName", v?.name ?? "");
              }}
              options={groups}
              placeholder="Select a group..."
              getOptionLabel={(option) => option.name}
              getOptionValue={(option) => option.id}
            />
          </FormControl>
        )}
      />
    </>
  );
};


Review comment (suggestion):
Think this needs `isClearable` - can't unselect a group
<img width="1456" height="1098" alt="CleanShot 2025-08-26 at 09 02 46@2x" src="https://github.com/user-attachments/assets/7464e974-a3ba-402c-a909-bd01f2f2181f" />


Code after:
                const v = option as SingleValue<TChecklyAccount>;
                onChange(v?.id ?? null);
                setValue("destinationConfig.accountName", v?.name ?? "");
              }}
              options={accounts}
              placeholder="Select an account..."
              getOptionLabel={(option) => option.name}
              getOptionValue={(option) => option.id}
            />
          </FormControl>
        )}
      />

      <Controller
        name="destinationConfig.groupId"
        control={control}
        render={({ field: { value, onChange }, fieldState: { error } }) => (
          <FormControl
            isError={Boolean(error)}
            errorText={error?.message}
            label="Select a group"
            isOptional
            helperText="If provided, secrets will be scoped to a check group instead"
            tooltipClassName="max-w-md"
          >
            <FilterableSelect
              isLoading={isGroupsLoading && Boolean(connectionId)}
              isDisabled={!connectionId}
              isClearable
              value={groups.find((p) => p.id === value) ?? null}
              onChange={(option) => {
                const v = option as SingleValue<TChecklyAccount>;
                onChange(v?.id ?? null);
                setValue("destinationConfig.groupName", v?.name ?? undefined);
              }}
              options={groups}
              placeholder="Select a group..."
              getOptionLabel={(option) => option.name}
              getOptionValue={(option) => option.id}
            />
          </FormControl>
        )}
      />
    </>
  );
};