(answer) 04/06: optimize for no result

[shuai]

This is an automated email from the ASF dual-hosted git repository.

shuai pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/answer.git

commit 7b4592830bba8c403accc659f71a58c3469dd285
Author: hgaol <dhan...@hotmail.com>
AuthorDate: Mon Apr 21 22:26:53 2025 +0800

    optimize for no result
---
 i18n/en_US.yaml                           |  1 +
 ui/src/components/Modal/MergeTagModal.tsx | 35 ++++++++++++++++++-------------
 2 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/i18n/en_US.yaml b/i18n/en_US.yaml
index 444eb826..ecf2f275 100644
--- a/i18n/en_US.yaml
+++ b/i18n/en_US.yaml
@@ -1049,6 +1049,7 @@ ui:
       source_tag_description: The source tag and its associated data will be 
remapped to the target tag.
       target_tag_title: Target tag
       target_tag_description: A synonym between these two tags will be created 
after merging.
+      no_results: No tags matched
       btn_submit: Submit
       btn_close: Close
   edit_tag:
diff --git a/ui/src/components/Modal/MergeTagModal.tsx 
b/ui/src/components/Modal/MergeTagModal.tsx
index 6441331e..c35755c2 100644
--- a/ui/src/components/Modal/MergeTagModal.tsx
+++ b/ui/src/components/Modal/MergeTagModal.tsx
@@ -56,6 +56,7 @@ const MergeTagModal: FC<Props> = ({
   const [currentIndex, setCurrentIndex] = useState(0);
   const [dropdownVisible, setDropdownVisible] = useState(false);
   const [isFocused, setIsFocused] = useState(false);
+  const [hasSearched, setHasSearched] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
 
   const searchTags = async (search: string) => {
@@ -71,12 +72,14 @@ const MergeTagModal: FC<Props> = ({
         (tag) => tag.slug_name !== sourceTag.slug_name,
       );
       setTags(filteredTags);
+      setHasSearched(true);
       if (filteredTags.length > 0 && isFocused) {
         setDropdownVisible(true);
       }
     } catch (error) {
       console.error('Failed to search tags:', error);
       setTags([]);
+      setHasSearched(true);
     }
   };
 
@@ -104,6 +107,7 @@ const MergeTagModal: FC<Props> = ({
       setCurrentIndex(0);
       setDropdownVisible(false);
       setIsFocused(false);
+      setHasSearched(false);
     }
   }, [visible]);
 
@@ -123,10 +127,9 @@ const MergeTagModal: FC<Props> = ({
   const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { value } = e.target;
     setSearchValue(value);
+    setHasSearched(false);
     if (value) {
       debouncedSearch(value);
-    } else {
-      searchTags('');
     }
   };
 
@@ -207,19 +210,23 @@ const MergeTagModal: FC<Props> = ({
               onBlur={handleBlur}
               autoComplete="off"
             />
-            <Dropdown.Menu className="w-100">
-              {tags.map((tag, index) => (
-                <Dropdown.Item
-                  key={tag.slug_name}
-                  active={index === currentIndex}
-                  onClick={() => handleSelect(tag)}>
-                  {tag.display_name}
-                </Dropdown.Item>
-              ))}
-              {tags.length === 0 && searchValue && (
+            {tags.length !== 0 && (
+              <Dropdown.Menu className="w-100">
+                {tags.map((tag, index) => (
+                  <Dropdown.Item
+                    key={tag.slug_name}
+                    active={index === currentIndex}
+                    onClick={() => handleSelect(tag)}>
+                    {tag.display_name}
+                  </Dropdown.Item>
+                ))}
+              </Dropdown.Menu>
+            )}
+            {tags.length === 0 && searchValue && hasSearched && (
+              <Dropdown.Menu className="w-100">
                 <Dropdown.Item disabled>{t('no_results')}</Dropdown.Item>
-              )}
-            </Dropdown.Menu>
+              </Dropdown.Menu>
+            )}
           </Dropdown>
           <Form.Text className="text-muted">
             {t('target_tag_description')}