diff --git a/packages/twenty-front/src/modules/object-record/relation-picker/components/MultiRecordSelect.tsx b/packages/twenty-front/src/modules/object-record/relation-picker/components/MultiRecordSelect.tsx
index b1c10cbbb6f1..e8067019754a 100644
--- a/packages/twenty-front/src/modules/object-record/relation-picker/components/MultiRecordSelect.tsx
+++ b/packages/twenty-front/src/modules/object-record/relation-picker/components/MultiRecordSelect.tsx
@@ -140,11 +140,13 @@ export const MultiRecordSelect = ({
{dropdownPlacement?.includes('end') && (
<>
-
- {createNewButton}
-
+ {isDefined(onCreate) && (
+
+ {createNewButton}
+
+ )}
- {results}
+ {objectRecordsIdsMultiSelect?.length > 0 && results}
{recordMultiSelectIsLoading && !relationPickerSearchFilter && (
<>
@@ -171,13 +173,11 @@ export const MultiRecordSelect = ({
>
)}
- {results}
+ {objectRecordsIdsMultiSelect?.length > 0 && results}
{objectRecordsIdsMultiSelect?.length > 0 && (
)}
-
- {createNewButton}
-
+ {isDefined(onCreate) && {createNewButton}
}
>
)}
diff --git a/packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelectMenuItems.tsx b/packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelectMenuItems.tsx
index e832cf0c2ed4..0e8a7b1e366f 100644
--- a/packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelectMenuItems.tsx
+++ b/packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelectMenuItems.tsx
@@ -1,15 +1,13 @@
import { isNonEmptyString } from '@sniptt/guards';
-import { Fragment, useRef } from 'react';
+import { useRef } from 'react';
import { useRecoilValue } from 'recoil';
import { Key } from 'ts-key-enum';
-import { IconComponent, IconPlus, MenuItemSelect } from 'twenty-ui';
+import { IconComponent, MenuItemSelect } from 'twenty-ui';
import { SelectableMenuItemSelect } from '@/object-record/relation-picker/components/SelectableMenuItemSelect';
import { SINGLE_ENTITY_SELECT_BASE_LIST } from '@/object-record/relation-picker/constants/SingleEntitySelectBaseList';
-import { CreateNewButton } from '@/ui/input/relation-picker/components/CreateNewButton';
import { DropdownMenuSkeletonItem } from '@/ui/input/relation-picker/components/skeletons/DropdownMenuSkeletonItem';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
-import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
@@ -26,8 +24,6 @@ export type SingleEntitySelectMenuItemsProps = {
onCancel?: () => void;
onEntitySelected: (entity?: EntityForSelect) => void;
selectedEntity?: EntityForSelect;
- onCreate?: () => void;
- showCreateButton?: boolean;
SelectAllIcon?: IconComponent;
selectAllLabel?: string;
isAllEntitySelected?: boolean;
@@ -46,8 +42,6 @@ export const SingleEntitySelectMenuItems = ({
onCancel,
onEntitySelected,
selectedEntity,
- onCreate,
- showCreateButton,
SelectAllIcon,
selectAllLabel,
isAllEntitySelected,
@@ -59,14 +53,6 @@ export const SingleEntitySelectMenuItems = ({
}: SingleEntitySelectMenuItemsProps) => {
const containerRef = useRef(null);
- const createNewRecord = showCreateButton
- ? {
- __typename: '',
- id: 'add-new',
- name: 'Add New',
- }
- : null;
-
const selectNone = emptyLabel
? {
__typename: '',
@@ -88,7 +74,6 @@ export const SingleEntitySelectMenuItems = ({
selectNone,
selectedEntity,
...entitiesToSelect,
- createNewRecord,
].filter(
(entity): entity is EntityForSelect =>
isDefined(entity) && isNonEmptyString(entity.name),
@@ -98,10 +83,6 @@ export const SingleEntitySelectMenuItems = ({
SINGLE_ENTITY_SELECT_BASE_LIST,
);
- const isSelectedAddNewButton = useRecoilValue(
- isSelectedItemIdSelector('add-new'),
- );
-
const isSelectedSelectNoneButton = useRecoilValue(
isSelectedItemIdSelector('select-none'),
);
@@ -129,14 +110,10 @@ export const SingleEntitySelectMenuItems = ({
selectableItemIdArray={selectableItemIds}
hotkeyScope={hotkeyScope}
onEnter={(itemId) => {
- if (itemId === 'add-new' && showCreateButton === true) {
- onCreate?.();
- } else {
- const entityIndex = entitiesInDropdown.findIndex(
- (entity) => entity.id === itemId,
- );
- onEntitySelected(entitiesInDropdown[entityIndex]);
- }
+ const entityIndex = entitiesInDropdown.findIndex(
+ (entity) => entity.id === itemId,
+ );
+ onEntitySelected(entitiesInDropdown[entityIndex]);
resetSelectedItem();
}}
>
@@ -146,32 +123,10 @@ export const SingleEntitySelectMenuItems = ({
) : entitiesInDropdown.length === 0 &&
!isAllEntitySelectShown &&
!loading ? (
- <>
- {entitiesToSelect.length > 0 && }
-
- >
+ <>>
) : (
entitiesInDropdown?.map((entity) => {
switch (entity.id) {
- case 'add-new': {
- return (
-
- {entitiesToSelect.length > 0 && }
-
-
- );
- }
case 'select-none': {
return (
emptyLabel && (
diff --git a/packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelectMenuItemsWithSearch.tsx b/packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelectMenuItemsWithSearch.tsx
index 9b8e56262977..6654da7ec86e 100644
--- a/packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelectMenuItemsWithSearch.tsx
+++ b/packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelectMenuItemsWithSearch.tsx
@@ -4,9 +4,12 @@ import {
} from '@/object-record/relation-picker/components/SingleEntitySelectMenuItems';
import { useEntitySelectSearch } from '@/object-record/relation-picker/hooks/useEntitySelectSearch';
import { useRelationPickerEntitiesOptions } from '@/object-record/relation-picker/hooks/useRelationPickerEntitiesOptions';
+import { CreateNewButton } from '@/ui/input/relation-picker/components/CreateNewButton';
+import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
import { Placement } from '@floating-ui/react';
+import { IconPlus } from 'twenty-ui';
import { isDefined } from '~/utils/isDefined';
import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
@@ -49,21 +52,13 @@ export const SingleEntitySelectMenuItemsWithSearch = ({
excludedRelationRecordIds,
});
- const showCreateButton = isDefined(onCreate);
-
- let onCreateWithInput = undefined;
-
- if (isDefined(onCreate)) {
- onCreateWithInput = () => {
- if (onCreate.length > 0) {
- (onCreate as (searchInput?: string) => void)(
- relationPickerSearchFilter,
- );
- } else {
- (onCreate as () => void)();
- }
- };
- }
+ const createNewButton = isDefined(onCreate) && (
+ onCreate?.(relationPickerSearchFilter)}
+ LeftIcon={IconPlus}
+ text="Add New"
+ />
+ );
const results = (
);
@@ -92,7 +85,11 @@ export const SingleEntitySelectMenuItemsWithSearch = ({
<>
{dropdownPlacement?.includes('end') && (
<>
- {results}
+
+ {createNewButton}
+
+ {entities.entitiesToSelect.length > 0 && }
+ {entities.entitiesToSelect.length > 0 && results}
>
)}
@@ -101,7 +98,15 @@ export const SingleEntitySelectMenuItemsWithSearch = ({
isUndefinedOrNull(dropdownPlacement)) && (
<>
- {results}
+ {entities.entitiesToSelect.length > 0 && results}
+ {entities.entitiesToSelect.length > 0 && isDefined(onCreate) && (
+
+ )}
+ {isDefined(onCreate) && (
+
+ {createNewButton}
+
+ )}
>
)}
>
diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx
index 2ec7a8471f96..92b334321cd5 100644
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx
@@ -7,7 +7,7 @@ import {
size,
useFloating,
} from '@floating-ui/react';
-import { MouseEvent, ReactNode, useRef } from 'react';
+import { MouseEvent, ReactNode, useEffect, useRef } from 'react';
import { Keys } from 'react-hotkeys-hook';
import { Key } from 'ts-key-enum';
@@ -65,8 +65,13 @@ export const Dropdown = ({
}: DropdownProps) => {
const containerRef = useRef(null);
- const { isDropdownOpen, toggleDropdown, closeDropdown, dropdownWidth } =
- useDropdown(dropdownId);
+ const {
+ isDropdownOpen,
+ toggleDropdown,
+ closeDropdown,
+ dropdownWidth,
+ setDropdownPlacement,
+ } = useDropdown(dropdownId);
const offsetMiddlewares = [];
@@ -78,7 +83,7 @@ export const Dropdown = ({
offsetMiddlewares.push(offset({ mainAxis: dropdownOffset.y }));
}
- const { refs, floatingStyles } = useFloating({
+ const { refs, floatingStyles, placement } = useFloating({
placement: dropdownPlacement,
middleware: [
flip(),
@@ -100,6 +105,10 @@ export const Dropdown = ({
strategy: dropdownStrategy,
});
+ useEffect(() => {
+ setDropdownPlacement(placement);
+ }, [placement, setDropdownPlacement]);
+
const handleHotkeyTriggered = () => {
toggleDropdown();
};