fix: get correct values from 'getTabSize' in older browsers (#694)

Co-authored-by: Ivan Stefanov <[email protected]>
react-component · Sep 29, 2024 · 85cfe6b · 85cfe6b
1 parent 66e6809
commit 85cfe6b
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 9 deletions.
diff --git a/src/TabNavList/index.tsx b/src/TabNavList/index.tsx
@@ -57,14 +57,14 @@ export interface TabNavListProps {
   };
 }
 
-const getTabSize = (tab: HTMLElement, containerRect: { x: number; y: number }) => {
+const getTabSize = (tab: HTMLElement, containerRect: { left: number; top: number }) => {
   // tabListRef
   const { offsetWidth, offsetHeight, offsetTop, offsetLeft } = tab;
-  const { width, height, x, y } = tab.getBoundingClientRect();
+  const { width, height, left, top } = tab.getBoundingClientRect();
 
   // Use getBoundingClientRect to avoid decimal inaccuracy
   if (Math.abs(width - offsetWidth) < 1) {
-    return [width, height, x - containerRect.x, y - containerRect.y];
+    return [width, height, left - containerRect.left, top - containerRect.top];
   }
 
   return [offsetWidth, offsetHeight, offsetLeft, offsetTop];

diff --git a/tests/overflow.test.tsx b/tests/overflow.test.tsx
@@ -21,7 +21,7 @@ describe('Tabs.Overflow', () => {
 
   let mockGetBoundingClientRect: (
     ele: HTMLElement,
-  ) => { x: number; y: number; width: number; height: number } | void = null;
+  ) => { left: number; top: number; width: number; height: number } | void = null;
 
   beforeEach(() => {
     mockGetBoundingClientRect = null;
@@ -49,8 +49,8 @@ describe('Tabs.Overflow', () => {
       getBoundingClientRect() {
         return (
           mockGetBoundingClientRect?.(this) || {
-            x: 0,
-            y: 0,
+            left: 0,
+            top: 0,
             width: 0,
             height: 0,
           }
@@ -526,8 +526,8 @@ describe('Tabs.Overflow', () => {
     mockGetBoundingClientRect = ele => {
       if (ele.classList.contains('rc-tabs-tab')) {
         const sharedRect = {
-          x: 0,
-          y: 0,
+          left: 0,
+          top: 0,
           width: 14.5,
           height: 14.5,
         };
@@ -538,7 +538,7 @@ describe('Tabs.Overflow', () => {
             }
           : {
               ...sharedRect,
-              x: 14.5,
+              left: 14.5,
             };
       }
       // console.log('ele!!!', ele.className);