From 436c2af00eba1f1fd6bc7bde0396c92a4fe6dffc Mon Sep 17 00:00:00 2001
From: Patryk Andrzejewski <vox3r69@gmail.com>
Date: Fri, 28 Jul 2023 09:27:18 +0200
Subject: [PATCH] Handle oudside click for filters popover (#4021)

* Oudside click handler

* Oudside click handler

* Changeset
---
 .changeset/rotten-otters-shop.md                 |  5 +++++
 .../ListFilters/components/ExpressionFilters.tsx |  8 ++++++--
 .../FilterElement/FilterElement.ts               |  4 ++++
 .../ConditionalFilter/FilterValueProvider.ts     |  3 ++-
 .../ValueProvider/useUrlValueProvider.ts         |  7 ++++++-
 .../ConditionalFilter/useContainerState.ts       | 16 ++++++++++++++++
 6 files changed, 39 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/rotten-otters-shop.md

diff --git a/.changeset/rotten-otters-shop.md b/.changeset/rotten-otters-shop.md
new file mode 100644
index 000000000..7622ef91d
--- /dev/null
+++ b/.changeset/rotten-otters-shop.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Handle oudside click for filters popover
diff --git a/src/components/AppLayout/ListFilters/components/ExpressionFilters.tsx b/src/components/AppLayout/ListFilters/components/ExpressionFilters.tsx
index f54955ba6..3c859876d 100644
--- a/src/components/AppLayout/ListFilters/components/ExpressionFilters.tsx
+++ b/src/components/AppLayout/ListFilters/components/ExpressionFilters.tsx
@@ -17,7 +17,11 @@ import { useIntl } from "react-intl";
 export const ExpressionFilters = () => {
   const [open, setOpen] = useState(false);
   const { formatMessage } = useIntl();
-  const { valueProvider } = useConditionalFilterContext();
+  const { valueProvider, containerState } = useConditionalFilterContext();
+
+  const clickOutside = () => {
+    containerState.clearEmpty()
+  }
 
   return (
     <Popover open={open} onOpenChange={open => setOpen(open)}>
@@ -28,7 +32,7 @@ export const ExpressionFilters = () => {
           })}
         </DropdownButton>
       </Popover.Trigger>
-      <Popover.Content align="start">
+      <Popover.Content align="start" onInteractOutside={clickOutside}>
         <Box
           __minHeight="250px"
           __minWidth="636px"
diff --git a/src/components/ConditionalFilter/FilterElement/FilterElement.ts b/src/components/ConditionalFilter/FilterElement/FilterElement.ts
index 5be3245e2..192cf56e4 100644
--- a/src/components/ConditionalFilter/FilterElement/FilterElement.ts
+++ b/src/components/ConditionalFilter/FilterElement/FilterElement.ts
@@ -164,6 +164,10 @@ export class FilterElement {
     return UrlEntry.forStatic(this.condition.selected, this.value.value);
   }
 
+  public equals(element: FilterElement) {
+    return this.value.value === element.value.value
+  }
+
   public static isCompatible(element: unknown): element is FilterElement {
     return (
       typeof element === "object" &&
diff --git a/src/components/ConditionalFilter/FilterValueProvider.ts b/src/components/ConditionalFilter/FilterValueProvider.ts
index 0af17546d..e621f9e46 100644
--- a/src/components/ConditionalFilter/FilterValueProvider.ts
+++ b/src/components/ConditionalFilter/FilterValueProvider.ts
@@ -1,9 +1,10 @@
-import { FilterContainer } from "./FilterElement";
+import { FilterContainer, FilterElement } from "./FilterElement";
 
 export interface FilterValueProvider {
   value: FilterContainer;
   loading: boolean;
   persist: (newValue: FilterContainer) => void;
+  isPersisted: (element: FilterElement) => boolean;
   clear: () => void;
   count: number;
 }
diff --git a/src/components/ConditionalFilter/ValueProvider/useUrlValueProvider.ts b/src/components/ConditionalFilter/ValueProvider/useUrlValueProvider.ts
index 9be5bb9b2..c5408b42c 100644
--- a/src/components/ConditionalFilter/ValueProvider/useUrlValueProvider.ts
+++ b/src/components/ConditionalFilter/ValueProvider/useUrlValueProvider.ts
@@ -3,7 +3,7 @@ import { useEffect, useState } from "react";
 import useRouter from "use-react-router";
 
 import { InitialAPIState } from "../API";
-import { FilterContainer } from "../FilterElement";
+import { FilterContainer, FilterElement } from "../FilterElement";
 import { FilterValueProvider } from "../FilterValueProvider";
 import { useTokenArray } from "./TokenArray";
 import { UrlEntry } from "./UrlToken";
@@ -61,6 +61,10 @@ export const useUrlValueProvider = (
     setValue([]);
   };
 
+  const isPersisted = (element: FilterElement) => {
+    return value.some(p => FilterElement.isCompatible(p) && p.equals(element))
+  }
+
   const count = value.filter(v => typeof v !== "string").length;
 
   return {
@@ -68,6 +72,7 @@ export const useUrlValueProvider = (
     loading,
     persist,
     clear,
+    isPersisted,
     count,
   };
 };
diff --git a/src/components/ConditionalFilter/useContainerState.ts b/src/components/ConditionalFilter/useContainerState.ts
index cf4cc3506..7ec420120 100644
--- a/src/components/ConditionalFilter/useContainerState.ts
+++ b/src/components/ConditionalFilter/useContainerState.ts
@@ -49,6 +49,17 @@ const removeElement = (container: FilterContainer, position: number) => {
   return removeConstraint(newContainer);
 };
 
+const removeEmptyElements = (container: FilterContainer, provider: FilterValueProvider): FilterContainer => {
+  const emptyIndex = container.findIndex(el =>
+    FilterElement.isCompatible(el) && (!provider.isPersisted(el) || el.isEmpty())
+  )
+
+  if (emptyIndex < 0) return container
+
+  return removeEmptyElements(removeElement(container, emptyIndex), provider)
+}
+
+
 export const useContainerState = (valueProvider: FilterValueProvider) => {
   const [value, setValue] = useState<FilterContainer>([]);
 
@@ -124,6 +135,10 @@ export const useContainerState = (valueProvider: FilterValueProvider) => {
     setValue([]);
   };
 
+  const clearEmpty = () => {
+    setValue(v => removeEmptyElements(v, valueProvider))
+  }
+
   return {
     create,
     exist,
@@ -133,5 +148,6 @@ export const useContainerState = (valueProvider: FilterValueProvider) => {
     removeAt,
     value,
     clear,
+    clearEmpty
   };
 };