From 81635db28a26e8a2a4b61a85f888e3433c72cd48 Mon Sep 17 00:00:00 2001
From: Kenil Shah <32725411+Kenil27@users.noreply.github.com>
Date: Mon, 9 Dec 2024 11:12:22 +0530
Subject: [PATCH] fix: close select dropdpwn when parent compoment is changed
 (#18950)

* fix: close select dropdpwn when parent compoment is changed

* code fixes

---------

Co-authored-by: Chirag Madlani <12962843+chirag-madlani@users.noreply.github.com>
---
 .../components/common/AsyncSelectList/AsyncSelectList.tsx | 8 ++++++++
 .../common/AsyncSelectList/TreeAsyncSelectList.tsx        | 8 ++++++++
 2 files changed, 16 insertions(+)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/AsyncSelectList/AsyncSelectList.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/AsyncSelectList/AsyncSelectList.tsx
index c10ba590800..9a1db2f210a 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/AsyncSelectList/AsyncSelectList.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/AsyncSelectList/AsyncSelectList.tsx
@@ -286,6 +286,13 @@ const AsyncSelectList: FC<AsyncSelectListProps & SelectProps> = ({
     onChange?.(selectedValues);
   };
 
+  const handleDropdownChange = (open: boolean) => {
+    if (!open) {
+      // Close the form when the dropdown closes
+      onCancel && onCancel();
+    }
+  };
+
   useEffect(() => {
     loadOptions('');
   }, []);
@@ -314,6 +321,7 @@ const AsyncSelectList: FC<AsyncSelectListProps & SelectProps> = ({
       style={{ width: '100%' }}
       tagRender={customTagRender}
       onChange={handleChange}
+      onDropdownVisibleChange={handleDropdownChange}
       onInputKeyDown={(event) => {
         if (event.key === 'Backspace') {
           return event.stopPropagation();
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/AsyncSelectList/TreeAsyncSelectList.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/AsyncSelectList/TreeAsyncSelectList.tsx
index 31f8e2ebfe0..9ed6a8e2f82 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/AsyncSelectList/TreeAsyncSelectList.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/AsyncSelectList/TreeAsyncSelectList.tsx
@@ -267,6 +267,13 @@ const TreeAsyncSelectList: FC<Omit<AsyncSelectListProps, 'fetchOptions'>> = ({
     }
   }, 300);
 
+  const handleDropdownChange = (open: boolean) => {
+    if (!open) {
+      // Close the form when the dropdown closes
+      onCancel && onCancel();
+    }
+  };
+
   useEffect(() => {
     if (glossaries.length) {
       expandableKeys.current = glossaries.map((glossary) => glossary.id);
@@ -327,6 +334,7 @@ const TreeAsyncSelectList: FC<Omit<AsyncSelectListProps, 'fetchOptions'>> = ({
       treeData={treeData}
       treeExpandedKeys={isEmpty(searchOptions) ? undefined : expandedRowKeys}
       onChange={handleChange}
+      onDropdownVisibleChange={handleDropdownChange}
       onSearch={onSearch}
       onTreeExpand={setExpandedRowKeys}
       {...props}