admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Removed unecessary dropdown container on MultiSelectFieldInput (#9116)

Browse Source 
There was an unecessary dropdown menu container div that was conflicting
with the recent refactor of dropdowns. The OverlayContainer component is
now at the root of the tree of a cell.
This commit is contained in:
Lucas Bordeau
2024-12-18 12:22:02 +01:00
committed by GitHub
parent 45214fe548
commit d895468ebe
1 changed files with 28 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
packages/twenty-front/src/modules/ui/field/input/components/MultiSelectInput.tsx
View File

@ -1,4 +1,3 @@
import styled from '@emotion/styled';
import { useRef, useState } from 'react'; import { useRef, useState } from 'react';
import { useRecoilValue } from 'recoil'; import { useRecoilValue } from 'recoil';
import { Key } from 'ts-key-enum'; import { Key } from 'ts-key-enum';
@ -19,12 +18,6 @@ import { MenuItemMultiSelectTag } from 'twenty-ui';
import { isDefined } from '~/utils/isDefined'; import { isDefined } from '~/utils/isDefined';
import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly'; import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly';
const StyledRelationPickerContainer = styled.div`
left: -1px;
position: absolute;
top: -1px;
`;
type MultiSelectInputProps = { type MultiSelectInputProps = {
values: FieldMultiSelectValue; values: FieldMultiSelectValue;
hotkeyScope: string; hotkeyScope: string;
@ -115,36 +108,34 @@ export const MultiSelectInput = ({
} }
}} }}
> >
<StyledRelationPickerContainer ref={containerRef}> <DropdownMenu data-select-disable ref={containerRef}>
<DropdownMenu data-select-disable> <DropdownMenuSearchInput
<DropdownMenuSearchInput value={searchFilter}
value={searchFilter} onChange={(event) =>
onChange={(event) => setSearchFilter(
setSearchFilter( turnIntoEmptyStringIfWhitespacesOnly(event.currentTarget.value),
turnIntoEmptyStringIfWhitespacesOnly(event.currentTarget.value), )
) }
} autoFocus
autoFocus />
/> <DropdownMenuSeparator />
<DropdownMenuSeparator /> <DropdownMenuItemsContainer hasMaxHeight>
<DropdownMenuItemsContainer hasMaxHeight> {filteredOptionsInDropDown.map((option) => {
{filteredOptionsInDropDown.map((option) => { return (
return ( <MenuItemMultiSelectTag
<MenuItemMultiSelectTag key={option.value}
key={option.value} selected={values?.includes(option.value) || false}
selected={values?.includes(option.value) || false} text={option.label}
text={option.label} color={option.color ?? 'transparent'}
color={option.color ?? 'transparent'} onClick={() =>
onClick={() => onOptionSelected(formatNewSelectedOptions(option.value))
onOptionSelected(formatNewSelectedOptions(option.value)) }
} isKeySelected={selectedItemId === option.value}
isKeySelected={selectedItemId === option.value} />
/> );
); })}
})} </DropdownMenuItemsContainer>
</DropdownMenuItemsContainer> </DropdownMenu>
</DropdownMenu>
</StyledRelationPickerContainer>
</SelectableList> </SelectableList>
); );
}; };