fix(tabs): capsule wrong width and position after resize within `n-mo…

…dal`, closes #5569
tusen-ai · Feb 25, 2024 · a0baf01 · a0baf01
1 parent 1e0e2fa
commit a0baf01
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 19 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -6,7 +6,8 @@
 
 - Fix `n-split`'s `min` attribute does not take effect.
 - Fix `n-result` built-in icons not re-rendered after hydration.
-- Fix `n-tabs` whose `type` is `'segmented'` has capsule wrong width and position after resize, closes [#5705](https://github.com/tusen-ai/naive-ui/issues/5705).
+- Fix `n-tabs` whose `type` is `'segment'` has capsule with wrong width and position after resize, closes [#5705](https://github.com/tusen-ai/naive-ui/issues/5705).
+- Fix `n-tabs`'s capsule wrong width and position after resize within `n-modal`, closes [#5569](https://github.com/tusen-ai/naive-ui/issues/5569).
 
 ### Features
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -6,7 +6,8 @@
 
 - 修复 `n-split` 的 `min` 属性未生效
 - 修复 `n-result` 内置的 icon 无法在 hydration 之后重渲染
-- 修复 `n-tabs` 在 `type` 为 `'segmented'` 时候，胶囊在 tabs 大小改变后有错误的位置和宽度，关闭 [#5705](https://github.com/tusen-ai/naive-ui/issues/5705)
+- 修复 `n-tabs` 在 `type` 为 `'segment'` 时候，胶囊在 tabs 大小改变后有错误的位置和宽度，关闭 [#5705](https://github.com/tusen-ai/naive-ui/issues/5705)
+- 修复 `n-tabs` 在 `n-modal` 内部时，胶囊在 tabs 大小改变后有错误的位置和宽度，关闭 [#5569](https://github.com/tusen-ai/naive-ui/issues/5569)
 
 ### Features
 

diff --git a/src/tabs/demos/zhCN/index.demo-entry.md b/src/tabs/demos/zhCN/index.demo-entry.md
@@ -31,6 +31,7 @@ addable-debug.vue
 animation-debug.vue
 animationx-debug.vue
 none-debug.vue
+modal-debug.vue
 ```
 
 ## API

diff --git a/src/tabs/demos/zhCN/modal-debug.demo.vue b/src/tabs/demos/zhCN/modal-debug.demo.vue
@@ -0,0 +1,30 @@
+<markdown>
+# Modal debug
+</markdown>
+
+<template>
+  <n-button @click="show = true">
+    Show modal
+  </n-button>
+  <n-modal v-model:show="show" preset="card">
+    <n-tabs type="segment">
+      <n-tab v-for="tab in tabs" :key="tab" :name="tab">
+        I'm {{ tab }}
+      </n-tab>
+    </n-tabs>
+  </n-modal>
+</template>
+
+<script lang="ts">
+import { ref, defineComponent } from 'vue'
+
+export default defineComponent({
+  setup () {
+    const showRef = ref(false)
+    return {
+      tabs: ['ccccc', 'dddddd'],
+      show: showRef
+    }
+  }
+})
+</script>
diff --git a/src/tabs/src/Tabs.tsx b/src/tabs/src/Tabs.tsx
@@ -429,13 +429,12 @@ export default defineComponent({
       transitionDisabled && tabsEl.classList.add('transition-disabled')
       const activeTabEl = getCurrentEl()
       if (activeTabEl && segmentCapsuleElRef.value) {
-        const rect = activeTabEl.getBoundingClientRect()
         // move segment capsule to match the position of the active tab
-        segmentCapsuleElRef.value.style.width = `${rect.width}px`
-        segmentCapsuleElRef.value.style.height = `${rect.height}px`
+        segmentCapsuleElRef.value.style.width = `${activeTabEl.offsetWidth}px`
+        segmentCapsuleElRef.value.style.height = `${activeTabEl.offsetHeight}px`
         segmentCapsuleElRef.value.style.transform = `translateX(${
-          rect.left -
-          tabsEl.getBoundingClientRect().left -
+          activeTabEl.offsetLeft -
+          tabsEl.offsetLeft -
           depx(getComputedStyle(tabsEl).paddingLeft)
         }px)`
         if (transitionDisabled) {
@@ -605,7 +604,7 @@ export default defineComponent({
       }
     }
 
-    const handleSegmentedResize = (): void => {
+    const handleSegmentResize = (): void => {
       updateSegmentPosition({
         transitionDisabled: true
       })
@@ -725,7 +724,7 @@ export default defineComponent({
       animationDirection: animationDirectionRef,
       renderNameListRef,
       yScrollElRef,
-      handleSegmentedResize,
+      handleSegmentResize,
       onAnimationBeforeLeave,
       onAnimationEnter,
       onAnimationAfterEnter,
@@ -883,7 +882,7 @@ export default defineComponent({
               )
           )}
           {isSegment ? (
-            <VResizeObserver onResize={this.handleSegmentedResize}>
+            <VResizeObserver onResize={this.handleSegmentResize}>
               {{
                 default: () => (
                   <div class={`${mergedClsPrefix}-tabs-rail`} ref="tabsElRef">

diff --git a/src/tabs/src/styles/index.cssr.ts b/src/tabs/src/styles/index.cssr.ts
@@ -138,15 +138,16 @@ export default cB('tabs', `
     ])
   ]),
   cM('flex', [
-    cB('tabs-nav', {
-      width: '100%'
-    }, [
-      cB('tabs-wrapper', {
-        width: '100%'
-      }, [
-        cB('tabs-tab', {
-          marginRight: 0
-        })
+    cB('tabs-nav', `
+      width: 100%;
+      position: relative;
+    `, [
+      cB('tabs-wrapper', `
+        width: 100%;
+      `, [
+        cB('tabs-tab', `
+          margin-right: 0;
+        `)
       ])
     ])
   ]),