From fa4d0f3375ce62a8664c6a85ad356933a29b54b4 Mon Sep 17 00:00:00 2001
From: saller <weskerli@163.com>
Date: Thu, 10 Nov 2022 11:01:16 +0800
Subject: [PATCH] fix(comp:tree): height not working in non-virtual mode
 (#1244)

---
 .../tree/__tests__/__snapshots__/tree.spec.ts.snap       | 2 +-
 packages/components/tree/src/Tree.tsx                    | 9 ++++++---
 packages/components/tree/style/index.less                | 3 +--
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/components/tree/__tests__/__snapshots__/tree.spec.ts.snap b/packages/components/tree/__tests__/__snapshots__/tree.spec.ts.snap
index 3c22e2413..026c0d48e 100644
--- a/packages/components/tree/__tests__/__snapshots__/tree.spec.ts.snap
+++ b/packages/components/tree/__tests__/__snapshots__/tree.spec.ts.snap
@@ -382,7 +382,7 @@ exports[`Tree > height and virtual work 1`] = `
 exports[`Tree > height and virtual work 2`] = `
 "<div class=\\"ix-tree ix-tree-active\\" role=\\"tree\\">
   <!----><input style=\\"width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;\\" tabindex=\\"0\\" aria-label=\\"for screen reader\\">
-  <div class=\\"ix-tree-content\\">
+  <div class=\\"ix-tree-content\\" style=\\"max-height: 100px;\\">
     <div class=\\"ix-tree-content-inner\\">
       <div class=\\"ix-tree-node ix-tree-node-expanded\\" aria-label=\\"Node 0\\" aria-selected=\\"false\\" title=\\"Node 0\\"><span aria-hidden=\\"true\\" class=\\"ix-tree-node-indent\\"></span>
         <!----><span class=\\"ix-tree-node-expand\\"><!----><i class=\\"ix-icon ix-icon-right\\" style=\\"transform: rotate(90deg);\\" role=\\"img\\" aria-label=\\"right\\"></i></span><label class=\\"ix-checkbox ix-tree-node-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\"><span class=\\"ix-checkbox-input-box\\"></span></span>
diff --git a/packages/components/tree/src/Tree.tsx b/packages/components/tree/src/Tree.tsx
index d31bf342d..314ae4ea0 100644
--- a/packages/components/tree/src/Tree.tsx
+++ b/packages/components/tree/src/Tree.tsx
@@ -5,7 +5,7 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import { type CSSProperties, type VNodeTypes, computed, defineComponent, provide, ref } from 'vue'
+import { type CSSProperties, type VNodeTypes, computed, defineComponent, normalizeStyle, provide, ref } from 'vue'
 
 import { isNil } from 'lodash-es'
 
@@ -15,7 +15,7 @@ import {
   type VirtualScrollInstance,
   type VirtualScrollToOptions,
 } from '@idux/cdk/scroll'
-import { type VKey, callEmit } from '@idux/cdk/utils'
+import { type VKey, callEmit, convertCssPixel } from '@idux/cdk/utils'
 import { ɵEmpty } from '@idux/components/_private/empty'
 import { useGlobalConfig } from '@idux/components/config'
 import { useGetKey } from '@idux/components/utils'
@@ -185,7 +185,10 @@ export default defineComponent({
             onScrolledChange={handleScrolledChange}
           />
         ) : (
-          <div class={`${mergedPrefixCls.value}-content`}>
+          <div
+            class={`${mergedPrefixCls.value}-content`}
+            style={normalizeStyle(autoHeight.value ? undefined : { maxHeight: convertCssPixel(height) })}
+          >
             <div class={`${mergedPrefixCls.value}-content-inner`}>
               {nodes.map(item => (
                 <TreeNode node={item} {...item}></TreeNode>
diff --git a/packages/components/tree/style/index.less b/packages/components/tree/style/index.less
index bf42a3ab0..384f50619 100644
--- a/packages/components/tree/style/index.less
+++ b/packages/components/tree/style/index.less
@@ -177,7 +177,6 @@
 
   &-leaf {
     width: @tree-node-content-height;
-    line-height: @tree-node-content-height;
     align-self: stretch;
     text-align: center;
     cursor: default;
@@ -185,7 +184,7 @@
     &-line {
       position: relative;
       z-index: 1;
-      display: inline-block;
+      display: block;
       height: 100%;
       width: 100%;