diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormSelectFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormSelectFieldInput.tsx index e8149052b1..06477fce6d 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormSelectFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormSelectFieldInput.tsx @@ -102,9 +102,8 @@ export const FormSelectFieldInput = ({ Icon: IconCircleOff, }; - const optionsWithEmptyOption = isNullable - ? [emptyOption, ...options] - : options; + const optionsWithEmptyOption = + isNullable || options.length === 0 ? [emptyOption, ...options] : options; const selectedOption = optionsWithEmptyOption.find( (option) => option.value === draftValue.value, diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/__stories__/FormSelectFieldInput.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/__stories__/FormSelectFieldInput.stories.tsx index b10ea34429..5608716e38 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/__stories__/FormSelectFieldInput.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/__stories__/FormSelectFieldInput.stories.tsx @@ -126,6 +126,37 @@ export const NonNullable: Story = { }, }; +export const NoOptionsWithCallToAction: Story = { + args: { + label: 'Work Policy', + defaultValue: undefined, + options: [], + onChange: fn(), + callToActionButton: { + text: 'Add work policy', + onClick: fn(), + }, + }, + play: async ({ args, canvasElement }) => { + const canvas = within(canvasElement); + + const selectControl = await canvas.findByText('No Work Policy'); + expect(selectControl).toBeVisible(); + + await userEvent.click(selectControl); + + const dropdown = within(canvasElement.ownerDocument.body); + + await waitFor(() => { + expect(dropdown.getByText('Add work policy')).toBeVisible(); + }); + + await userEvent.click(dropdown.getByText('Add work policy')); + + expect(args.callToActionButton?.onClick).toHaveBeenCalled(); + }, +}; + export const WithVariablePicker: Story = { args: { label: 'Work Policy',