fix: #1254

XiaoMi · Oct 27, 2020 · 56dd057 · 56dd057
1 parent fbf2a08
commit 56dd057
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@
 - 修复 `Input` 在受控状态下，设置 value 为 null 时报错问题 [#1246](https://github.com/XiaoMi/hiui/issues/1246)
 - 优化 `<Timepicker/>` 时间范围选择器，支持字符串格式的 value [#1245](https://github.com/XiaoMi/hiui/issues/1245)
 - 修复 `Select` 设置 autoload 为 true 时无限的调用接口问题 [#1249](https://github.com/XiaoMi/hiui/issues/1249)
+- 修复 `SelectTree` 弹出层在页面底部不能翻转问题 [#1254](https://github.com/XiaoMi/hiui/issues/1254)
 
 ## 3.0.0
 

diff --git a/components/select-tree/SelectTreeHook.js b/components/select-tree/SelectTreeHook.js
@@ -43,7 +43,8 @@ const SelectTree = ({
   autoExpand,
   overlayClassName,
   theme,
-  localeDatas
+  localeDatas,
+  placement = 'top-bottom-start'
 }) => {
   const selectedItemsRef = useRef()
   const inputRef = useRef()
@@ -345,6 +346,7 @@ const SelectTree = ({
           attachEle={inputRef.current}
           width={false}
           topGap={5}
+          placement={placement}
           overlayClassName={overlayClassName}
           className={`hi-selecttree__popper ${data.length === 0 && dataSource ? 'hi-selecttree__popper--loading' : ''}`}
           onClickOutside={() => setShow(false)}

diff --git a/components/select-tree/components/tree/style/index.scss b/components/select-tree/components/tree/style/index.scss
@@ -5,7 +5,7 @@ $tree: 'hi-select-tree' !default;
   color: use-color('black');
   padding: 12px 12px 0 12px;
   box-sizing: border-box;
-  height: 100%;
+  max-height: 282px;
   overflow: auto;
 
   &--empty {
@@ -86,6 +86,8 @@ $tree: 'hi-select-tree' !default;
   &__list {
     margin: 0;
     padding: 0 12px;
+    max-height: 282px;
+    overflow: auto;
   }
 
   &__item {

diff --git a/components/select-tree/style/index.scss b/components/select-tree/style/index.scss
@@ -112,12 +112,12 @@
     background: use-color('white');
     box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
     border-radius: 2px;
-    max-height: 300px;
+    max-height: 320px;
     overflow: auto;
     width: 320px;
 
     &--loading {
-      height: 300px;
+      height: 320px;
     }
   }