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>
open-metadata · Dec 9, 2024 · 81635db · 81635db
1 parent 6ec5d0c
commit 81635db
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 0 deletions.
diff --git a/...tadata-ui/src/main/resources/ui/src/components/common/AsyncSelectList/AsyncSelectList.tsx b/...tadata-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/...ta-ui/src/main/resources/ui/src/components/common/AsyncSelectList/TreeAsyncSelectList.tsx b/...ta-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}