From 850b78a69900481ced2724d3559d1eb1028b7776 Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Tue, 12 Dec 2023 11:40:00 +0100
Subject: [PATCH] fix: show popover on empty state (#5611)

---
 .../common/FilterDateItem/FilterDateItem.test.tsx      | 10 +++++++++-
 .../component/common/FilterDateItem/FilterDateItem.tsx |  4 +++-
 .../component/common/FilterItem/FilterItem.test.tsx    | 10 +++++++++-
 .../src/component/common/FilterItem/FilterItem.tsx     |  4 +++-
 4 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/frontend/src/component/common/FilterDateItem/FilterDateItem.test.tsx b/frontend/src/component/common/FilterDateItem/FilterDateItem.test.tsx
index 86d85b895b..c9cb4cb2ae 100644
--- a/frontend/src/component/common/FilterDateItem/FilterDateItem.test.tsx
+++ b/frontend/src/component/common/FilterDateItem/FilterDateItem.test.tsx
@@ -5,7 +5,7 @@ import { FilterDateItem, IFilterDateItemProps } from './FilterDateItem';
 
 const getDate = (option: string) => screen.getByText(option);
 
-const setup = (initialState: FilterItemParams) => {
+const setup = (initialState: FilterItemParams | null) => {
     const recordedChanges: FilterItemParams[] = [];
     const mockProps: IFilterDateItemProps = {
         label: 'Test Label',
@@ -51,6 +51,14 @@ describe('FilterDateItem Component', () => {
         ]);
     });
 
+    it('renders initial popover when no existing value', async () => {
+        const mockState = null;
+
+        const recordedChanges = setup(mockState);
+
+        await screen.findByText('21');
+    });
+
     it('switches operator', async () => {
         const mockState = {
             operator: 'IS_ON_OR_AFTER',
diff --git a/frontend/src/component/common/FilterDateItem/FilterDateItem.tsx b/frontend/src/component/common/FilterDateItem/FilterDateItem.tsx
index ddbb62a685..a0e7f69659 100644
--- a/frontend/src/component/common/FilterDateItem/FilterDateItem.tsx
+++ b/frontend/src/component/common/FilterDateItem/FilterDateItem.tsx
@@ -33,7 +33,9 @@ export const FilterDateItem: FC<IFilterDateItemProps> = ({
     };
 
     useEffect(() => {
-        open();
+        if (!state) {
+            open();
+        }
     }, []);
 
     const onClose = () => {
diff --git a/frontend/src/component/common/FilterItem/FilterItem.test.tsx b/frontend/src/component/common/FilterItem/FilterItem.test.tsx
index feea8f0cc1..7a4efa2080 100644
--- a/frontend/src/component/common/FilterItem/FilterItem.test.tsx
+++ b/frontend/src/component/common/FilterItem/FilterItem.test.tsx
@@ -5,7 +5,7 @@ import { FilterItem, FilterItemParams, IFilterItemProps } from './FilterItem';
 const getOption = (option: string) =>
     screen.getByText(option).closest('li')!.querySelector('input')!;
 
-const setup = (initialState: FilterItemParams) => {
+const setup = (initialState: FilterItemParams | null) => {
     const recordedChanges: FilterItemParams[] = [];
     const mockProps: IFilterItemProps = {
         label: 'Test Label',
@@ -67,6 +67,14 @@ describe('FilterItem Component', () => {
         ]);
     });
 
+    it('renders initial popover when no existing value', async () => {
+        const mockState = null;
+
+        const recordedChanges = setup(mockState);
+
+        await screen.findByPlaceholderText('Search');
+    });
+
     it('renders explicit and extra options', async () => {
         const mockState = {
             operator: 'IS_ANY_OF',
diff --git a/frontend/src/component/common/FilterItem/FilterItem.tsx b/frontend/src/component/common/FilterItem/FilterItem.tsx
index 114b2aadfa..69725467e2 100644
--- a/frontend/src/component/common/FilterItem/FilterItem.tsx
+++ b/frontend/src/component/common/FilterItem/FilterItem.tsx
@@ -46,7 +46,9 @@ export const FilterItem: FC<IFilterItemProps> = ({
     };
 
     useEffect(() => {
-        open();
+        if (!state) {
+            open();
+        }
     }, []);
 
     const onClose = () => {