fix(popover): arrow's misplacement when placed in nested popovers wit…

…h different placement, closes tusen-ai#916
arijs · Aug 31, 2021 · 1e511e4 · 1e511e4
1 parent 85e5c80
commit 1e511e4
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 3 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -12,6 +12,7 @@
 - Fix `n-notification`'s exported `NotificationReactive` type is not writable, closes [#876](https://github.com/TuSimple/naive-ui/issues/876).
 - Fix `n-tabs` style glitches when different types tabs are nested, closes [#850](https://github.com/TuSimple/naive-ui/issues/850).
 - Fix `n-dropdown`'s inner link click trigger area is not the entire option, closes [#823](https://github.com/TuSimple/naive-ui/issues/823).
+- Fix `n-popover` arrow's misplacement when placed in nested popovers with different placement, closes [#916](https://github.com/TuSimple/naive-ui/issues/916).
 
 ## 2.16.4 (2021-08-16)
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -12,6 +12,7 @@
 - 修复 `n-notification` 导出的 `NotificationReactive` 类型不可变，关闭 [#876](https://github.com/TuSimple/naive-ui/issues/876)
 - 修复 `n-tabs` 不同类型嵌套样式错乱，关闭 [#850](https://github.com/TuSimple/naive-ui/issues/850)
 - 修复 `n-dropdown` 内部的链接点击触发区域不是整个选项，关闭 [#823](https://github.com/TuSimple/naive-ui/issues/823)
+- 修复 `n-popover` 嵌套于不同 placement 的 popover 中箭头位置错乱，关闭 [#916](https://github.com/TuSimple/naive-ui/issues/916)
 
 ## 2.16.4 (2021-08-16)
 

diff --git a/src/_utils/cssr/index.ts b/src/_utils/cssr/index.ts
@@ -51,12 +51,18 @@ function asModal (style: CProperties): CNode {
   return c(({ props: { bPrefix } }) => `&${bPrefix || prefix}modal`, style)
 }
 
+// child block
+const cCB: typeof cB = ((...args: any[]) => {
+  return c('>', [(cB as any)(...args)])
+}) as any
+
 export {
   c,
   cB,
   cE,
   cM,
   cNotM,
+  cCB,
   insideFormItem,
   insideModal,
   insidePopover,

diff --git a/src/popover/demos/zhCN/index.demo-entry.md b/src/popover/demos/zhCN/index.demo-entry.md
@@ -17,8 +17,9 @@ raw-content
 style
 trigger-width
 manual-position
-hoist-debug
 header
+hoist-debug
+nested-debug
 ```
 
 ## Props

diff --git a/src/popover/demos/zhCN/nested-debug.demo.md b/src/popover/demos/zhCN/nested-debug.demo.md
@@ -0,0 +1,32 @@
+# Nested Debug
+
+```html
+<n-popover trigger="click" placement="bottom-end">
+  <template #trigger>
+    <div>
+      <n-tag>hover</n-tag>
+    </div>
+  </template>
+  <n-list bordered>
+    <n-list-item v-for="(item, index) in dataList" :key="index">
+      <n-ellipsis style="max-width: 300px"> {{ item }} </n-ellipsis>
+    </n-list-item>
+  </n-list>
+</n-popover>
+```
+
+```js
+import { defineComponent } from 'vue'
+export default defineComponent({
+  setup () {
+    return {
+      dataList: [
+        'Lorem',
+        'Lorem',
+        'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vero eveniet exercitationem quasi. Sequi quia natus quam ipsa sit autem eveniet harum tempore, eius placeat temporibus nobis veritatis vero totam possimus.',
+        'jflakjdflksjflkajdlkfjaslkfjklasjdflkasjflkjsadlkf'
+      ]
+    }
+  }
+})
+```
diff --git a/src/popover/src/styles/index.cssr.ts b/src/popover/src/styles/index.cssr.ts
@@ -1,6 +1,6 @@
 import { CNode } from 'css-render'
 import { FollowerPlacement } from 'vueuc'
-import { c, cB, cM, cNotM, cE } from '../../../_utils/cssr'
+import { c, cB, cM, cNotM, cE, cCB } from '../../../_utils/cssr'
 
 const oppositePlacement = {
   top: 'bottom',
@@ -164,7 +164,7 @@ function placementStyle (
       cM('overlap', `
         margin: 0;
       `),
-      cB('popover-arrow-wrapper', `
+      cCB('popover-arrow-wrapper', `
         right: 0;
         left: 0;
         top: 0;