(incubator-answer) branch test updated: fix: select tag automatically scroll to visible position

[shuai]

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

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


The following commit(s) were added to refs/heads/test by this push:
     new b20bf6a7 fix: select tag automatically scroll to visible position
b20bf6a7 is described below

commit b20bf6a74859aa89cb0d8fee149be789031bee76
Author: shuai <lishuail...@sifou.com>
AuthorDate: Fri Jul 19 15:44:41 2024 +0800

    fix: select tag automatically scroll to visible position
---
 ui/src/components/TagSelector/index.tsx | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/ui/src/components/TagSelector/index.tsx 
b/ui/src/components/TagSelector/index.tsx
index 2e539a05..b3cb4480 100644
--- a/ui/src/components/TagSelector/index.tsx
+++ b/ui/src/components/TagSelector/index.tsx
@@ -214,6 +214,17 @@ const TagSelector: FC<IProps> = ({
     fetchTags(searchStr);
   };
 
+  const scrollIntoView = (targetId) => {
+    const container = document.getElementById('a-dropdown-menu') as 
HTMLElement;
+    const ele = document.getElementById(targetId) as HTMLElement;
+    if (ele?.offsetTop >= 104) {
+      container.scrollTo({
+        top: ele.offsetTop - 104,
+        behavior: 'smooth',
+      });
+    }
+  };
+
   const handleKeyDown = (e) => {
     e.stopPropagation();
     const { keyCode } = e;
@@ -230,9 +241,11 @@ const TagSelector: FC<IProps> = ({
     }
 
     if (keyCode === 38 && currentIndex > 0) {
+      scrollIntoView(tags[currentIndex - 1].slug_name);
       setCurrentIndex(currentIndex - 1);
     }
     if (keyCode === 40 && currentIndex < tags.length - 1) {
+      scrollIntoView(tags[currentIndex + 1].slug_name);
       setCurrentIndex(currentIndex + 1);
     }
 
@@ -422,6 +435,7 @@ const TagSelector: FC<IProps> = ({
             return (
               <Dropdown.Item
                 key={item.slug_name}
+                id={item.slug_name}
                 active={index === currentIndex}
                 onClick={() => handleClick(item)}>
                 {item.display_name}