From 6433a0d783878877c34d90e6125423851960889b Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Mon, 28 Jun 2021 01:17:36 +0800
Subject: [PATCH] fix(dropdown): can't render `n-popover` in option (#311)

---
 CHANGELOG.en-US.md                  |  1 +
 CHANGELOG.zh-CN.md                  |  1 +
 src/_utils/index.ts                 |  3 ++-
 src/_utils/vue/create-ref-setter.ts | 11 +++++++++++
 src/_utils/vue/index.ts             |  1 +
 src/dropdown/src/Dropdown.tsx       |  5 +++--
 src/popselect/src/Popselect.tsx     | 12 ++----------
 7 files changed, 21 insertions(+), 13 deletions(-)
 create mode 100644 src/_utils/vue/create-ref-setter.ts

diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index 1301276f9..4fade97f6 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -19,6 +19,7 @@
 - Fix `n-input` clear button placeholder prevent clicking on actual component [#288](https://github.com/TuSimple/naive-ui/issues/288)
 - Fix `n-carousel` click the at current item button, the component behaves abnormally.
 - Fix `n-menu` `render-label` not working for tooltip in collapsed mode.
+- Fix `n-dropdown` can't render `n-popover` in option.
 
 ## 2.14.0 (2021-06-23)
 
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index 74d74c0ce..44a99950f 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -19,6 +19,7 @@
 - Fix `n-input` clear button placeholder prevent clicking on actual component [#288](https://github.com/TuSimple/naive-ui/issues/288)
 - 修复 `n-carousel` 点击当前页对应的控制按钮时，组件显示异常
 - 修复 `n-menu` 折叠时 `render-label` 对于 tooltip 不生效
+- 修复 `n-dropdown` 不能在选项中渲染 `n-popover`
 
 ## 2.14.0 (2021-06-23)
 
diff --git a/src/_utils/index.ts b/src/_utils/index.ts
index f3bdffb81..d954f756d 100644
--- a/src/_utils/index.ts
+++ b/src/_utils/index.ts
@@ -8,7 +8,8 @@ export {
   keysOf,
   render,
   getFirstSlotVNode,
-  createDataKey
+  createDataKey,
+  createRefSetter
 } from './vue'
 export type { MaybeArray } from './vue'
 export { warn, warnOnce, throwError, smallerSize, largerSize } from './naive'
diff --git a/src/_utils/vue/create-ref-setter.ts b/src/_utils/vue/create-ref-setter.ts
new file mode 100644
index 000000000..53e91e5ff
--- /dev/null
+++ b/src/_utils/vue/create-ref-setter.ts
@@ -0,0 +1,11 @@
+import { Ref } from 'vue'
+
+export function createRefSetter (ref: Ref<HTMLElement | null>): any {
+  return (inst: { $el: HTMLElement | null } | null) => {
+    if (inst) {
+      ref.value = inst.$el
+    } else {
+      ref.value = null
+    }
+  }
+}
diff --git a/src/_utils/vue/index.ts b/src/_utils/vue/index.ts
index 547d54525..5753bb95e 100644
--- a/src/_utils/vue/index.ts
+++ b/src/_utils/vue/index.ts
@@ -8,4 +8,5 @@ export { keysOf } from './keysOf'
 export { render } from './render'
 export { getFirstSlotVNode } from './get-first-slot-vnode'
 export { createDataKey } from './create-data-key'
+export { createRefSetter } from './create-ref-setter'
 export type { MaybeArray } from './call'
diff --git a/src/dropdown/src/Dropdown.tsx b/src/dropdown/src/Dropdown.tsx
index 53d5fe3d4..80666740b 100644
--- a/src/dropdown/src/Dropdown.tsx
+++ b/src/dropdown/src/Dropdown.tsx
@@ -26,7 +26,8 @@ import {
   call,
   createKey,
   MaybeArray,
-  ExtractPublicPropTypes
+  ExtractPublicPropTypes,
+  createRefSetter
 } from '../../_utils'
 import { dropdownLight } from '../styles'
 import type { DropdownTheme } from '../styles'
@@ -373,7 +374,7 @@ export default defineComponent({
     ) => {
       const { mergedClsPrefix } = this
       const dropdownProps = {
-        ref,
+        ref: createRefSetter(ref),
         class: [className, `${mergedClsPrefix}-dropdown`],
         clsPrefix: mergedClsPrefix,
         tmNodes: this.tmNodes,
diff --git a/src/popselect/src/Popselect.tsx b/src/popselect/src/Popselect.tsx
index aa6b10194..2a2c1bbd0 100644
--- a/src/popselect/src/Popselect.tsx
+++ b/src/popselect/src/Popselect.tsx
@@ -4,7 +4,7 @@ import type { PopoverInternalProps } from '../../popover/src/Popover'
 import { NPopover } from '../../popover'
 import type { PopoverInst, PopoverTrigger } from '../../popover'
 import NPopselectPanel, { panelPropKeys, panelProps } from './PopselectPanel'
-import { omit, keep } from '../../_utils'
+import { omit, keep, createRefSetter } from '../../_utils'
 import type { ExtractPublicPropTypes } from '../../_utils'
 import { useTheme } from '../../_mixins'
 import type { ThemeProps } from '../../_mixins'
@@ -73,15 +73,7 @@ export default defineComponent({
               style
             })}
             {...keep(this.$props, panelPropKeys)}
-            ref={
-              ((inst: { $el: HTMLElement | null } | null) => {
-                if (inst) {
-                  ref.value = inst.$el
-                } else {
-                  ref.value = null
-                }
-              }) as any
-            }
+            ref={createRefSetter(ref)}
             onMouseenter={onMouseenter}
             onMouseleave={onMouseleave}
           />