Removed unnecessary dropdown container

twentyhq · Dec 18, 2024 · 58cd207 · 58cd207
1 parent 45214fe
commit 58cd207
Showing 1 changed file with 28 additions and 37 deletions.
diff --git a/packages/twenty-front/src/modules/ui/field/input/components/MultiSelectInput.tsx b/packages/twenty-front/src/modules/ui/field/input/components/MultiSelectInput.tsx
@@ -1,4 +1,3 @@
-import styled from '@emotion/styled';
 import { useRef, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 import { Key } from 'ts-key-enum';
@@ -19,12 +18,6 @@ import { MenuItemMultiSelectTag } from 'twenty-ui';
 import { isDefined } from '~/utils/isDefined';
 import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly';
 
-const StyledRelationPickerContainer = styled.div`
-  left: -1px;
-  position: absolute;
-  top: -1px;
-`;
-
 type MultiSelectInputProps = {
   values: FieldMultiSelectValue;
   hotkeyScope: string;
@@ -115,36 +108,34 @@ export const MultiSelectInput = ({
         }
       }}
     >
-      <StyledRelationPickerContainer ref={containerRef}>
-        <DropdownMenu data-select-disable>
-          <DropdownMenuSearchInput
-            value={searchFilter}
-            onChange={(event) =>
-              setSearchFilter(
-                turnIntoEmptyStringIfWhitespacesOnly(event.currentTarget.value),
-              )
-            }
-            autoFocus
-          />
-          <DropdownMenuSeparator />
-          <DropdownMenuItemsContainer hasMaxHeight>
-            {filteredOptionsInDropDown.map((option) => {
-              return (
-                <MenuItemMultiSelectTag
-                  key={option.value}
-                  selected={values?.includes(option.value) || false}
-                  text={option.label}
-                  color={option.color ?? 'transparent'}
-                  onClick={() =>
-                    onOptionSelected(formatNewSelectedOptions(option.value))
-                  }
-                  isKeySelected={selectedItemId === option.value}
-                />
-              );
-            })}
-          </DropdownMenuItemsContainer>
-        </DropdownMenu>
-      </StyledRelationPickerContainer>
+      <DropdownMenu data-select-disable ref={containerRef}>
+        <DropdownMenuSearchInput
+          value={searchFilter}
+          onChange={(event) =>
+            setSearchFilter(
+              turnIntoEmptyStringIfWhitespacesOnly(event.currentTarget.value),
+            )
+          }
+          autoFocus
+        />
+        <DropdownMenuSeparator />
+        <DropdownMenuItemsContainer hasMaxHeight>
+          {filteredOptionsInDropDown.map((option) => {
+            return (
+              <MenuItemMultiSelectTag
+                key={option.value}
+                selected={values?.includes(option.value) || false}
+                text={option.label}
+                color={option.color ?? 'transparent'}
+                onClick={() =>
+                  onOptionSelected(formatNewSelectedOptions(option.value))
+                }
+                isKeySelected={selectedItemId === option.value}
+              />
+            );
+          })}
+        </DropdownMenuItemsContainer>
+      </DropdownMenu>
     </SelectableList>
   );
 };