fix(tooltip): log errors in console when used in n-select's `render…

…-option`, closes #1436
tusen-ai · Jan 10, 2022 · e1aa6b0 · e1aa6b0
1 parent bd6765b
commit e1aa6b0
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 31 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -20,6 +20,7 @@
 - Fix `n-progress`'s inner text of `line` type not aligned in center, closes[#2138](https://github.com/TuSimple/naive-ui/issues/2138).
 - Fix `n-message` 's `MessageReactive` type lacks `type` parameter.
 - Fix `n-select` has different `padding` with `n-input`, closes [#2149](https://github.com/TuSimple/naive-ui/issues/2149).
+- Fix `n-tooltip` log errors in console when used in `n-select`'s `render-option`, closes [#1436](https://github.com/TuSimple/naive-ui/issues/1436).
 
 ### Feats
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -20,6 +20,7 @@
 - 修复 `n-progress` `line` 类型的进度条中的文字未居中，关闭 [#2138](https://github.com/TuSimple/naive-ui/issues/2138)
 - 修复 `n-message` 的 `MessageReactive` 类型缺少 `type` 参数
 - 修复 `n-select` 与 `n-input` `padding` 不一致，关闭 [#2149](https://github.com/TuSimple/naive-ui/issues/2149)
+- 修复 `n-tooltip` 用于 `n-select` `render-option` 时控制台报错，关闭 [#1436](https://github.com/TuSimple/naive-ui/issues/1436)
 
 ### Feats
 

diff --git a/package.json b/package.json
@@ -145,7 +145,7 @@
     "vdirs": "^0.1.7",
     "vfonts": "^0.0.3",
     "vooks": "^0.2.12",
-    "vueuc": "^0.4.19"
+    "vueuc": "^0.4.20"
   },
   "sideEffects": false,
   "homepage": "https://www.naiveui.com",

diff --git a/src/select/src/Select.tsx b/src/select/src/Select.tsx
@@ -11,7 +11,8 @@ import {
   withDirectives,
   vShow,
   InputHTMLAttributes,
-  HTMLAttributes
+  HTMLAttributes,
+  watchEffect
 } from 'vue'
 import { happensIn } from 'seemly'
 import { createTreeMate, TreeNode } from 'treemate'
@@ -31,8 +32,8 @@ import {
 import { RenderTag } from '../../_internal/selection/src/interface'
 import { useTheme, useConfig, useLocale, useFormItem } from '../../_mixins'
 import type { ThemeProps } from '../../_mixins'
-import { warn, call, useAdjustedTo, ExtractPublicPropTypes } from '../../_utils'
-import type { MaybeArray } from '../../_utils'
+import { call, useAdjustedTo, warnOnce } from '../../_utils'
+import type { MaybeArray, ExtractPublicPropTypes } from '../../_utils'
 import {
   NInternalSelectMenu,
   NInternalSelection,
@@ -46,7 +47,6 @@ import {
   filterOptions,
   defaultFilter
 } from './utils'
-import style from './styles/index.cssr'
 import type {
   SelectMixedOption,
   SelectBaseOption,
@@ -58,6 +58,7 @@ import type {
   Size,
   ValueAtom
 } from './interface'
+import style from './styles/index.cssr'
 
 const selectProps = {
   ...(useTheme.props as ThemeProps<SelectTheme>),
@@ -111,7 +112,7 @@ const selectProps = {
   },
   fallbackOption: {
     type: [Function, Boolean] as PropType<
-    ((value: string | number) => SelectBaseOption) | false
+      ((value: string | number) => SelectBaseOption) | false
     >,
     default: () => (value: string | number) => ({
       label: String(value),
@@ -165,34 +166,13 @@ const selectProps = {
   'onUpdate:show': [Function, Array] as PropType<
   MaybeArray<(value: boolean) => void>
   >,
-  /** deprecated */
-  onChange: {
-    type: [Function, Array] as PropType<MaybeArray<OnUpdateValue> | undefined>,
-    validator: () => {
-      if (__DEV__) {
-        warn(
-          'select',
-          '`on-change` is deprecated, please use `on-update:value` instead.'
-        )
-      }
-      return true
-    },
-    default: undefined
-  },
-  items: {
-    type: Array as PropType<SelectMixedOption[] | undefined>,
-    validator: () => {
-      if (__DEV__) {
-        warn('select', '`items` is deprecated, please use `options` instead.')
-      }
-      return true
-    },
-    default: undefined
-  },
   displayDirective: {
     type: String as PropType<'if' | 'show'>,
     default: 'show'
-  }
+  },
+  /** deprecated */
+  onChange: [Function, Array] as PropType<MaybeArray<OnUpdateValue>>,
+  items: Array as PropType<SelectMixedOption[]>
 } as const
 
 export type SelectProps = ExtractPublicPropTypes<typeof selectProps>
@@ -201,6 +181,23 @@ export default defineComponent({
   name: 'Select',
   props: selectProps,
   setup (props) {
+    if (__DEV__) {
+      watchEffect(() => {
+        if (props.items !== undefined) {
+          warnOnce(
+            'select',
+            '`items` is deprecated, please use `options` instead.'
+          )
+        }
+        if (props.onChange !== undefined) {
+          warnOnce(
+            'select',
+            '`on-change` is deprecated, please use `on-update:value` instead.'
+          )
+        }
+      })
+    }
+
     const { mergedClsPrefixRef, mergedBorderedRef, namespaceRef } =
       useConfig(props)
     const themeRef = useTheme(