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

Make view bar filter dropdown field select scrollable (#16684)

Browse Source 
From PR https://github.com/twentyhq/twenty/pull/16640

Fixes https://github.com/twentyhq/twenty/issues/16637

QA 



https://github.com/user-attachments/assets/e6651309-0b10-4085-ba1f-e8d25bab1aa5
This commit is contained in:
Lucas Bordeau
2025-12-18 23:25:36 -10:00
committed by GitHub
parent 21695d743b
commit 1d2aba5b22
1 changed files with 51 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownFieldSelectMenu.tsx
+51 -49
View File
@@ -1,8 +1,6 @@
import styled from '@emotion/styled';
import React from 'react';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { objectFilterDropdownSearchInputComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSearchInputComponentState';
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
@@ -18,8 +16,10 @@ import { ViewBarFilterDropdownFieldSelectMenuItem } from '@/views/components/Vie
import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader';
import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
import { VIEW_BAR_FILTER_BOTTOM_MENU_ITEM_IDS } from '@/views/constants/ViewBarFilterBottomMenuItemIds';
import { ViewBarFilterDropdownIds } from '@/views/constants/ViewBarFilterDropdownIds';
import { useLingui } from '@lingui/react/macro';
@@ -99,53 +99,55 @@ export const ViewBarFilterDropdownFieldSelectMenu = () => {
>
{t`Filter`}
</DropdownMenuHeader>
<StyledInput
value={objectFilterDropdownSearchInput}
autoFocus
placeholder={t`Search fields`}
onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
setObjectFilterDropdownSearchInput(event.target.value)
}
/>
<SelectableList
selectableItemIdArray={selectableFieldMetadataItemIds}
selectableListInstanceId={FILTER_FIELD_LIST_ID}
focusId={ViewBarFilterDropdownIds.MAIN}
>
{shouldShowVisibleFields && (
<>
<DropdownMenuSectionLabel label={t`Visible fields`} />
<DropdownMenuItemsContainer>
{selectableVisibleFieldMetadataItems.map(
(visibleFieldMetadataItem) => (
<ViewBarFilterDropdownFieldSelectMenuItem
key={visibleFieldMetadataItem.id}
fieldMetadataItemToSelect={visibleFieldMetadataItem}
/>
),
)}
</DropdownMenuItemsContainer>
</>
)}
{shouldShowSeparator && <DropdownMenuSeparator />}
{shouldShowHiddenFields && (
<>
<DropdownMenuSectionLabel label={t`Hidden fields`} />
<DropdownMenuItemsContainer>
{selectableHiddenFieldMetadataItems.map(
(hiddenFieldMetadataItem) => (
<ViewBarFilterDropdownFieldSelectMenuItem
key={hiddenFieldMetadataItem.id}
fieldMetadataItemToSelect={hiddenFieldMetadataItem}
/>
),
)}
</DropdownMenuItemsContainer>
</>
)}
{hasSelectableItems && <DropdownMenuSeparator />}
<ViewBarFilterDropdownBottomMenu />
</SelectableList>
<ScrollWrapper componentInstanceId="view-bar-dropdown-filter-field-select-menu">
<StyledInput
value={objectFilterDropdownSearchInput}
autoFocus
placeholder={t`Search fields`}
onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
setObjectFilterDropdownSearchInput(event.target.value)
}
/>
<SelectableList
selectableItemIdArray={selectableFieldMetadataItemIds}
selectableListInstanceId={FILTER_FIELD_LIST_ID}
focusId={ViewBarFilterDropdownIds.MAIN}
>
{shouldShowVisibleFields && (
<>
<DropdownMenuSectionLabel label={t`Visible fields`} />
<DropdownMenuItemsContainer scrollable={false}>
{selectableVisibleFieldMetadataItems.map(
(visibleFieldMetadataItem) => (
<ViewBarFilterDropdownFieldSelectMenuItem
key={visibleFieldMetadataItem.id}
fieldMetadataItemToSelect={visibleFieldMetadataItem}
/>
),
)}
</DropdownMenuItemsContainer>
</>
)}
{shouldShowSeparator && <DropdownMenuSeparator />}
{shouldShowHiddenFields && (
<>
<DropdownMenuSectionLabel label={t`Hidden fields`} />
<DropdownMenuItemsContainer scrollable={false}>
{selectableHiddenFieldMetadataItems.map(
(hiddenFieldMetadataItem) => (
<ViewBarFilterDropdownFieldSelectMenuItem
key={hiddenFieldMetadataItem.id}
fieldMetadataItemToSelect={hiddenFieldMetadataItem}
/>
),
)}
</DropdownMenuItemsContainer>
</>
)}
{hasSelectableItems && <DropdownMenuSeparator />}
<ViewBarFilterDropdownBottomMenu />
</SelectableList>
</ScrollWrapper>
</DropdownContent>
);
};