fix(input): placeholder glitch when value is 0 (#918)

* fix(input): placeholder bug

* update changelog

* update doc

* feat(input): optimization

Co-authored-by: Jiwen Bai <56228105@qq.com>
Co-authored-by: 07akioni <07akioni2@gmail.com>

CHANGELOG.en-US.md

@@ -10,6 +10,7 @@
 
 - Fix `n-image` not initializing `rorate` after switching images, closes [#921](https://github.com/TuSimple/naive-ui/issues/921).
 - Fix `n-data-table`'s loading is not centered, closes [#929](https://github.com/TuSimple/naive-ui/issues/929).
+- Fix `n-input` will show placeholder and 0 simultaneously while passing `value=ref(0)` in n-input, closes [#914](https://github.com/TuSimple/naive-ui/issues/914).
 
 ## 2.16.5 (2021-08-20)
 

CHANGELOG.zh-CN.md

@@ -10,6 +10,7 @@
 
 - 修复 `n-image` 切换图像后没有初始化 `rorate` 的问题，关闭 [#921](https://github.com/TuSimple/naive-ui/issues/921)
 - 修复 `n-data-table`的 loading 不在中间，关闭 [#929](https://github.com/TuSimple/naive-ui/issues/929)
+- 修复 `n-input` 当传递 `value=ref(0)` 时，同时显示 0 和占位符问题，关闭 [#914](https://github.com/TuSimple/naive-ui/issues/914)
 
 ## 2.16.5 (2021-08-20)
 

src/input/src/Input.tsx

@@ -189,13 +189,19 @@ export default defineComponent({
         return [placeholder] as [string]
       }
     })
+
+    function isEmptyValue (value: any): boolean {
+      return ['', undefined, null].includes(value)
+    }
+
     const showPlaceholder1Ref = computed(() => {
       const { value: isComposing } = isComposingRef
       const { value: mergedValue } = mergedValueRef
       const { value: mergedPlaceholder } = mergedPlaceholderRef
       return (
         !isComposing &&
-        (!mergedValue || (Array.isArray(mergedValue) && !mergedValue[0])) &&
+        (isEmptyValue(mergedValue) ||
+          (Array.isArray(mergedValue) && isEmptyValue(mergedValue[0]))) &&
         mergedPlaceholder[0]
       )
     })
@@ -206,7 +212,8 @@ export default defineComponent({
       return (
         !isComposing &&
         mergedPlaceholder[1] &&
-        (!mergedValue || (Array.isArray(mergedValue) && !mergedValue[1]))
+        (isEmptyValue(mergedValue) ||
+          (Array.isArray(mergedValue) && isEmptyValue(mergedValue[1])))
       )
     })
     // clear
@@ -400,7 +407,7 @@ export default defineComponent({
       }
       // force update to sync input's view with value
       // if not set, after input, input value won't sync with dom input value
-      (vm.$forceUpdate as any)()
+      ;(vm.$forceUpdate as any)()
     }
     function handleInputBlur (e: FocusEvent): void {
       doUpdateValueBlur(e)