chore: Use overflow to hide the tab pane in !animated

react-component · Jun 9, 2020 · 6b2c25c · 6b2c25c
1 parent 1a15766
commit 6b2c25c
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 9 deletions.
diff --git a/src/TabPanelList/TabPane.tsx b/src/TabPanelList/TabPane.tsx
@@ -44,10 +44,11 @@ export default function TabPane({
 
   const mergedStyle: React.CSSProperties = {};
   if (!active) {
-    if (animated) {
-      mergedStyle.visibility = 'hidden';
-    } else {
-      mergedStyle.display = 'none';
+    mergedStyle.visibility = 'hidden';
+
+    if (!animated) {
+      mergedStyle.height = 0;
+      mergedStyle.overflowY = 'hidden';
     }
   }
 

diff --git a/src/TabPanelList/index.tsx b/src/TabPanelList/index.tsx
@@ -31,9 +31,7 @@ export default function TabPanelList({
         className={classNames(`${prefixCls}-content`, `${prefixCls}-content-${tabPosition}`, {
           [`${prefixCls}-content-animated`]: tabPaneAnimated,
         })}
-        style={
-          tabPaneAnimated ? { [rtl ? 'marginRight' : 'marginLeft']: `-${activeIndex}00%` } : null
-        }
+        style={{ [rtl ? 'marginRight' : 'marginLeft']: `-${activeIndex}00%` }}
       >
         {tabs.map(tab => {
           return React.cloneElement(tab.node, {

diff --git a/tests/__snapshots__/index.test.tsx.snap b/tests/__snapshots__/index.test.tsx.snap
@@ -76,14 +76,15 @@ exports[`Tabs.Basic Normal 1`] = `
   >
     <div
       class="rc-tabs-content rc-tabs-content-top"
+      style="margin-left: -100%;"
     >
       <div
         aria-hidden="true"
         aria-labelledby="rc-tabs-test-tab-light"
         class="rc-tabs-tabpane"
         id="rc-tabs-test-panel-light"
         role="tabpanel"
-        style="display: none;"
+        style="visibility: hidden; height: 0px; overflow-y: hidden;"
         tabindex="-1"
       />
       <div
@@ -102,7 +103,7 @@ exports[`Tabs.Basic Normal 1`] = `
         class="rc-tabs-tabpane"
         id="rc-tabs-test-panel-cute"
         role="tabpanel"
-        style="display: none;"
+        style="visibility: hidden; height: 0px; overflow-y: hidden;"
         tabindex="-1"
       />
     </div>
@@ -164,6 +165,7 @@ exports[`Tabs.Basic Skip invalidate children 1`] = `
   >
     <div
       class="rc-tabs-content rc-tabs-content-top"
+      style="margin-left: -000%;"
     >
       <div
         aria-hidden="false"