fix(dropdown): can't render n-popover in option (#311)

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)
 

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)
 

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'

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
+    }
+  }
+}

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'

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,

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}
           />