Skip to content

Fix date filter is cut off #88704

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
bernhardoj wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Fix date filter is cut off #88704

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7c323d8
fix date filter is cut off
bernhardoj Apr 24, 2026
1b66486
expand popover when selecting date range
bernhardoj Apr 24, 2026
fcb59eb
set max height
bernhardoj Apr 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 9 additions & 5 deletions src/components/Search/FilterDropdowns/ReportFieldPopup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,13 @@ import type {Policy, PolicyReportField} from '@src/types/onyx';
import type {PolicyReportFieldType} from '@src/types/onyx/Policy';
import BasePopup from './BasePopup';
import DateSelectPopup from './DateSelectPopup';
import type {PopoverComponentProps} from './DropdownButton';
import SingleSelectPopup from './SingleSelectPopup';
import TextInputPopup from './TextInputPopup';

type ReportFieldPopupProps = {
closeOverlay: () => void;
setPopoverWidth: PopoverComponentProps['setPopoverWidth'];
updateFilterForm: (value: Partial<SearchAdvancedFiltersForm>) => void;
};

Expand All @@ -40,6 +42,7 @@ type ReportFieldSubPopupProps = {
type ReportFieldDatePopupProps = {
field: PolicyReportField;
value: SearchDateValues;
setPopoverWidth: PopoverComponentProps['setPopoverWidth'];
onBackButtonPress: () => void;
onChange: (newValue: SearchDateValues) => void;
};
Expand Down Expand Up @@ -67,14 +70,12 @@ function ReportFieldListPopup({value, field, onBackButtonPress, onChange}: Repor
);
}

function ReportFieldDatePopup({value, field, onBackButtonPress, onChange}: ReportFieldDatePopupProps) {
function ReportFieldDatePopup({value, field, setPopoverWidth, onBackButtonPress, onChange}: ReportFieldDatePopupProps) {
const styles = useThemeStyles();
const {windowHeight} = useWindowDimensions();
const isInLandscapeMode = useIsInLandscapeMode();
const filterKey = `${CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX}${getFieldNameAsKey(field.name)}` as const;

return (
<View style={[styles.pv4, styles.gap2, styles.getPopoverMaxHeight(windowHeight, isInLandscapeMode)]}>
<View style={[styles.pv4, styles.gap2]}>
Comment thread
bernhardoj marked this conversation as resolved.
Copy link
Copy Markdown
Contributor

@aimane-chnaif aimane-chnaif Apr 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please also add test case for this

Copy link
Copy Markdown
Contributor Author

@bernhardoj bernhardoj Apr 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

<HeaderWithBackButton
shouldDisplayHelpButton={false}
style={[styles.h10]}
Expand All @@ -86,6 +87,7 @@ function ReportFieldDatePopup({value, field, onBackButtonPress, onChange}: Repor
value={value}
onChange={onChange}
closeOverlay={onBackButtonPress}
setPopoverWidth={setPopoverWidth}
presets={getDatePresets(filterKey, true)}
/>
</View>
Expand All @@ -105,7 +107,7 @@ function ReportFieldTextPopup({field, value, onBackButtonPress, onChange}: Repor
);
}

function ReportFieldPopup({closeOverlay, updateFilterForm}: ReportFieldPopupProps) {
function ReportFieldPopup({closeOverlay, setPopoverWidth, updateFilterForm}: ReportFieldPopupProps) {
const {translate, localeCompare} = useLocalize();
const {windowHeight} = useWindowDimensions();
const isInLandscapeMode = useIsInLandscapeMode();
Expand Down Expand Up @@ -139,6 +141,7 @@ function ReportFieldPopup({closeOverlay, updateFilterForm}: ReportFieldPopupProp
if (selectedField) {
const goBack = () => {
setSelectedField(null);
setPopoverWidth?.(undefined);
};

// We only support list, date, & text for report fields, no other types
Expand All @@ -156,6 +159,7 @@ function ReportFieldPopup({closeOverlay, updateFilterForm}: ReportFieldPopupProp
field={selectedField}
value={filterValue as SearchDateValues}
onBackButtonPress={goBack}
setPopoverWidth={setPopoverWidth}
onChange={(newValue) =>
setValues((prevValues) => ({
...prevValues,
Expand Down
7 changes: 0 additions & 7 deletions src/components/Search/SearchPageHeader/DatePickerFilterPopup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,7 @@ import React from 'react';
import DateSelectPopup from '@components/Search/FilterDropdowns/DateSelectPopup';
import type {PopoverComponentProps} from '@components/Search/FilterDropdowns/DropdownButton';
import type {SearchDateFilterKeys} from '@components/Search/types';
import useIsInLandscapeMode from '@hooks/useIsInLandscapeMode';
import useLocalize from '@hooks/useLocalize';
import useThemeStyles from '@hooks/useThemeStyles';
import useWindowDimensions from '@hooks/useWindowDimensions';
import type {SearchDateValues} from '@libs/SearchQueryUtils';
import {getDatePresets} from '@libs/SearchUIUtils';
import CONST from '@src/CONST';
Expand All @@ -21,9 +18,6 @@ type DatePickerFilterPopupProps = PopoverComponentProps & {

function DatePickerFilterPopup({closeOverlay, setPopoverWidth, filterKey, value, translationKey, updateFilterForm}: DatePickerFilterPopupProps) {
const {translate} = useLocalize();
const styles = useThemeStyles();
const {windowHeight} = useWindowDimensions();
const isInLandscapeMode = useIsInLandscapeMode();
const onChange = (selectedDates: SearchDateValues) => {
const dateFormValues: Record<string, string | undefined> = {};
dateFormValues[`${filterKey}On`] = selectedDates[CONST.SEARCH.DATE_MODIFIERS.ON];
Expand All @@ -40,7 +34,6 @@ function DatePickerFilterPopup({closeOverlay, setPopoverWidth, filterKey, value,
closeOverlay={closeOverlay}
setPopoverWidth={setPopoverWidth}
presets={getDatePresets(filterKey, true)}
style={[styles.getPopoverMaxHeight(windowHeight, isInLandscapeMode)]}
Copy link
Copy Markdown
Contributor

@aimane-chnaif aimane-chnaif Apr 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we still need max height and make it scrollable instead.

On resized window:

Image

Copy link
Copy Markdown
Contributor Author

@bernhardoj bernhardoj Apr 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I added back the max height style that was removed in https://github.com/Expensify/App/pull/88191/changes#diff-83cb90c4b04d8b728f53bc1ee7a2400a965b1148a1f4645cec08033cee26d83f, but instead of only applying it when date range modifier is selected, we now apply it to all cases, and also change the View to ScrollView in large screen to make it scrollable.

Note: DateSelectPopup is also used for date-type report field and the max height doesn't work fine

image

But I think it's fine, no real user will resize their window to be that small. In #88428, the report field date will follow the same max-height as the report field list and other popups.

/>
Comment thread
bernhardoj marked this conversation as resolved.
);
}
Expand Down
3 changes: 2 additions & 1 deletion src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -202,9 +202,10 @@ function useSearchFiltersBar(queryJSON: SearchQueryJSON): UseSearchFiltersBarRes

if (filterKey.startsWith(CONST.SEARCH.REPORT_FIELD.GLOBAL_PREFIX)) {
return {
PopoverComponent: ({closeOverlay}) => (
PopoverComponent: ({closeOverlay, setPopoverWidth}) => (
<ReportFieldPopup
closeOverlay={closeOverlay}
setPopoverWidth={setPopoverWidth}
updateFilterForm={updateFilterForm}
/>
),
Expand Down
Loading