From 27d2627a66055c14d5609a1cfd6063453141955b Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Tue, 3 Dec 2024 12:14:21 +0100
Subject: [PATCH] ui: autoclose autocomplete modal

---
 .../Filters/FilterAutoComplete/AutocompleteModal.tsx   | 10 +++++++---
 .../shared/Filters/FilterValue/FilterValue.tsx         |  1 +
 .../OutsideClickDetectingDiv.js                        |  2 +-
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/frontend/app/components/shared/Filters/FilterAutoComplete/AutocompleteModal.tsx b/frontend/app/components/shared/Filters/FilterAutoComplete/AutocompleteModal.tsx
index b6f0426f6..d3321ea77 100644
--- a/frontend/app/components/shared/Filters/FilterAutoComplete/AutocompleteModal.tsx
+++ b/frontend/app/components/shared/Filters/FilterAutoComplete/AutocompleteModal.tsx
@@ -1,6 +1,7 @@
 import React, { useRef, useState } from 'react';
 import { Button, Checkbox, Input } from 'antd';
 import cn from 'classnames';
+import OutsideClickDetectingDiv from '../../OutsideClickDetectingDiv';
 
 export function AutocompleteModal({
   onClose,
@@ -55,11 +56,14 @@ export function AutocompleteModal({
     return options;
   }, [options.length, values]);
   return (
-    <div
+    <OutsideClickDetectingDiv
       className={cn(
         'absolute left-0 mt-2 p-4 bg-white rounded-xl shadow border-gray-light z-10'
       )}
       style={{ minWidth: 320, minHeight: 100, top: '100%' }}
+      onClickOutside={() => {
+        onClose();
+      }}
     >
       <Input.Search
         value={query}
@@ -102,7 +106,7 @@ export function AutocompleteModal({
         </Button>
         <Button onClick={onClose}>Cancel</Button>
       </div>
-    </div>
+    </OutsideClickDetectingDiv>
   );
 }
 
@@ -134,7 +138,7 @@ export function AutoCompleteContainer(props: Props) {
       ref={filterValueContainer}
     >
       <div
-        onClick={() => setShowValueModal(true)}
+        onClick={() => setTimeout(() => setShowValueModal(true), 0)}
         className={'flex items-center gap-2 cursor-pointer'}
       >
         {!isEmpty ? (
diff --git a/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx b/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx
index f48b6026c..d56f5ebb1 100644
--- a/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx
+++ b/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx
@@ -171,6 +171,7 @@ function FilterValue(props: Props) {
 
   return (
     <div
+      id={`ignore-outside`}
       className={cn('grid gap-3', {
         'grid-cols-2': filter.hasSource,
         'grid-cols-3': !filter.hasSource,
diff --git a/frontend/app/components/shared/OutsideClickDetectingDiv/OutsideClickDetectingDiv.js b/frontend/app/components/shared/OutsideClickDetectingDiv/OutsideClickDetectingDiv.js
index a6ec97c40..d2587c5dc 100644
--- a/frontend/app/components/shared/OutsideClickDetectingDiv/OutsideClickDetectingDiv.js
+++ b/frontend/app/components/shared/OutsideClickDetectingDiv/OutsideClickDetectingDiv.js
@@ -19,7 +19,7 @@ function removeOutsideClickListener(ref) {
 function handleClickOutside(e) {
   refs.forEach((ref, i) => {
     if (ref.current !== null) {
-      const node = findDOMNode(ref.current);
+      const node = ref.current;
       if (node && !node.contains(e.target)) {
         callbacks[i](e);
       }