From 9572afccba9310945782d55d9a75df0fbbe6914e Mon Sep 17 00:00:00 2001
From: zhouyun1 <zhouyun1@xiaomi.com>
Date: Fri, 29 Mar 2024 11:12:29 +0800
Subject: [PATCH] =?UTF-8?q?fix(search):=20=E4=BF=AE=E5=A4=8D=E5=88=86?=
 =?UTF-8?q?=E7=BB=84=E4=B8=8D=E6=94=AF=E6=8C=81=202=20=E7=BA=A7=E4=BB=A5?=
 =?UTF-8?q?=E4=B8=8A=E6=95=B0=E6=8D=AE=E7=9A=84=E9=97=AE=E9=A2=98=20(#2777?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .changeset/olive-colts-watch.md           |   5 +
 .changeset/popular-games-complain.md      |   5 +
 packages/ui/search/src/SearchDropdown.tsx | 106 +++++++++++++---------
 packages/ui/search/src/styles/search.scss |   7 +-
 4 files changed, 77 insertions(+), 46 deletions(-)
 create mode 100644 .changeset/olive-colts-watch.md
 create mode 100644 .changeset/popular-games-complain.md

diff --git a/.changeset/olive-colts-watch.md b/.changeset/olive-colts-watch.md
new file mode 100644
index 000000000..31ea1bc33
--- /dev/null
+++ b/.changeset/olive-colts-watch.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/search": patch
+---
+
+fix: 修复分组不支持 2 级以上数据的问题
diff --git a/.changeset/popular-games-complain.md b/.changeset/popular-games-complain.md
new file mode 100644
index 000000000..3f14ce57c
--- /dev/null
+++ b/.changeset/popular-games-complain.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+fix(search): 修复分组不支持 2 级以上数据的问题
diff --git a/packages/ui/search/src/SearchDropdown.tsx b/packages/ui/search/src/SearchDropdown.tsx
index 7ee2dc55f..4baaf2063 100644
--- a/packages/ui/search/src/SearchDropdown.tsx
+++ b/packages/ui/search/src/SearchDropdown.tsx
@@ -29,52 +29,72 @@ export const SearchDropdown: React.FC<SearchDropdownProps> = ({
     return title
   })
 
+  const renderItem = useLatestCallback((data: SearchDataItem[]) => {
+    return data.map((item, index) => {
+      const isGroup = !!item.children && item.children.length > 0
+
+      return (
+        <Fragment key={item.id}>
+          <div
+            className={cx(
+              `${prefixCls}__dropdown-item`,
+              isGroup && `${prefixCls}__dropdown-group`,
+              focusIndex === index && !isGroup && `${prefixCls}__dropdown-item--focus`
+            )}
+            onClick={() => {
+              if (!isGroup) {
+                onSelect(item)
+              }
+            }}
+          >
+            {/* groupTitle 不参与高亮检索 */}
+            {isGroup ? item.title : highlightKeyword(item.title as string)}
+          </div>
+          {isArrayNonEmpty(item.children)
+            ? item.children.map((subItem, idx) => {
+                if (!subItem.children) {
+                  return (
+                    <div
+                      key={subItem.id}
+                      className={cx(
+                        `${prefixCls}__dropdown-subitem`,
+                        subFocusIndex === idx &&
+                          focusIndex === index &&
+                          `${prefixCls}__dropdown-subitem--focus`
+                      )}
+                      onClick={() => {
+                        onSelect(subItem)
+                      }}
+                    >
+                      {highlightKeyword(subItem.title as string)}
+                    </div>
+                  )
+                }
+
+                const subData = [
+                  {
+                    id: subItem.id,
+                    title: subItem.title,
+                    children: subItem.children,
+                  },
+                ]
+
+                return (
+                  <div key={subItem.id} className={`${prefixCls}__dropdown-subgroup`}>
+                    {renderItem(subData)}
+                  </div>
+                )
+              })
+            : null}
+        </Fragment>
+      )
+    })
+  })
+
   return (
     <Popper {...popper}>
       <Loading visible={loading}>
-        <div className={`${prefixCls}__dropdown`}>
-          {data.map((item, index) => {
-            const isGroup = !!item.children && item.children.length > 0
-
-            return (
-              <Fragment key={item.id}>
-                <div
-                  className={cx(
-                    `${prefixCls}__dropdown-item`,
-                    isGroup && `${prefixCls}__dropdown-group`,
-                    focusIndex === index && !isGroup && `${prefixCls}__dropdown-item--focus`
-                  )}
-                  onClick={() => {
-                    if (!isGroup) {
-                      onSelect(item)
-                    }
-                  }}
-                >
-                  {/* groupTitle 不参与高亮检索 */}
-                  {isGroup ? item.title : highlightKeyword(item.title as string)}
-                </div>
-                {isArrayNonEmpty(item.children)
-                  ? item.children.map((subItem, idx) => (
-                      <div
-                        key={subItem.id}
-                        className={cx(
-                          `${prefixCls}__dropdown-subitem`,
-                          subFocusIndex === idx &&
-                            focusIndex === index &&
-                            `${prefixCls}__dropdown-subitem--focus`
-                        )}
-                        onClick={() => {
-                          onSelect(subItem)
-                        }}
-                      >
-                        {highlightKeyword(subItem.title as string)}
-                      </div>
-                    ))
-                  : null}
-              </Fragment>
-            )
-          })}
-        </div>
+        <div className={`${prefixCls}__dropdown`}>{renderItem(data)}</div>
       </Loading>
     </Popper>
   )
diff --git a/packages/ui/search/src/styles/search.scss b/packages/ui/search/src/styles/search.scss
index ad09ba0ff..9ae26f3dc 100644
--- a/packages/ui/search/src/styles/search.scss
+++ b/packages/ui/search/src/styles/search.scss
@@ -15,7 +15,6 @@ $prefix: '#{$component-prefix}-search' !default;
     }
 
     &-subitem {
-      margin-bottom: use-spacing(4);
       min-height: use-height-size(8);
       box-sizing: border-box;
       display: flex;
@@ -41,7 +40,10 @@ $prefix: '#{$component-prefix}-search' !default;
       align-items: center;
       padding: use-spacing(2) use-spacing(6);
       color: use-color('gray', 500);
-      margin-bottom: use-spacing(4);
+    }
+
+    &-subgroup {
+      padding-left: use-spacing(6);
     }
 
     &-item {
@@ -50,7 +52,6 @@ $prefix: '#{$component-prefix}-search' !default;
           margin-bottom: 0;
         }
 
-        margin-bottom: use-spacing(4);
         box-sizing: border-box;
         min-height: use-height-size(8);
         display: flex;