From 1e38055376da7534197a4a942e7584b40cdd7782 Mon Sep 17 00:00:00 2001
From: Matiss Janis Aboltins <matiss@mja.lv>
Date: Mon, 8 Jul 2024 19:57:00 +0100
Subject: [PATCH] :bug: (popover) fix date popover closing when editing a
filter (#3009)
---
.../src/components/filters/FilterExpression.tsx | 17 +++++++++++++++++
upcoming-release-notes/3009.md | 6 ++++++
2 files changed, 23 insertions(+)
create mode 100644 upcoming-release-notes/3009.md
diff --git a/packages/desktop-client/src/components/filters/FilterExpression.tsx b/packages/desktop-client/src/components/filters/FilterExpression.tsx
index 674be7e8b..76cd1149b 100644
--- a/packages/desktop-client/src/components/filters/FilterExpression.tsx
+++ b/packages/desktop-client/src/components/filters/FilterExpression.tsx
@@ -18,6 +18,8 @@ import { Value } from '../rules/Value';
import { FilterEditor } from './FiltersMenu';
import { subfieldFromFilter } from './subfieldFromFilter';
+let isDatepickerClick = false;
+
type FilterExpressionProps = {
field: string | undefined;
customName: string | undefined;
@@ -100,6 +102,21 @@ export function FilterExpression({
placement="bottom start"
isOpen={editing}
onOpenChange={() => setEditing(false)}
+ shouldCloseOnInteractOutside={element => {
+ // Datepicker selections for some reason register 2x clicks
+ // We want to keep the popover open after selecting a date.
+ // So we ignore the "close" event on selection + the subsequent event.
+ if (element instanceof HTMLElement && element.dataset.pikaYear) {
+ isDatepickerClick = true;
+ return false;
+ }
+ if (isDatepickerClick) {
+ isDatepickerClick = false;
+ return false;
+ }
+
+ return true;
+ }}
style={{ width: 275, padding: 15, color: theme.menuItemText }}
data-testid="filters-menu-tooltip"
>
diff --git a/upcoming-release-notes/3009.md b/upcoming-release-notes/3009.md
new file mode 100644
index 000000000..8aa7ba131
--- /dev/null
+++ b/upcoming-release-notes/3009.md
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [MatissJanis]
+---
+
+Fix datepicker closing when trying to edit a date filter
--
GitLab