From 571efa209e83b47e415b7afaf309cbb84d8d78ac Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Mon, 21 Jun 2021 22:01:05 +0800
Subject: [PATCH] fix(date-picker, time-picker): icon doesn't work with
 clearable

Fix https://github.com/TuSimple/naive-ui/issues/222
---
 CHANGELOG.en-US.md                 | 2 ++
 CHANGELOG.zh-CN.md                 | 2 ++
 src/date-picker/src/DatePicker.tsx | 7 ++++---
 src/time-picker/src/TimePicker.tsx | 2 +-
 4 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index 4ef76eceb..6c98cc658 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -14,6 +14,8 @@
 - Fix `n-tree`'s `selected-keys` prop influences original array.
 - Fix `n-select`'s input has useless empty row in multiple filterable mode.
 - Fix `n-button`'s loading icon doesn't show on iOS Safari, closes [#219](https://github.com/TuSimple/naive-ui/issues/219).
+- Fix `n-date-picker` doesn't show icon when clearable.
+- Fix `n-time-picker` icon mis-aligned when clearable, closes [#222](https://github.com/TuSimple/naive-ui/issues/222).
 
 ## 2.12.2 (2021-06-19)
 
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index 46fdc64e1..5e2438f11 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -14,6 +14,8 @@
 - 修复 `n-tree` 对 `selected-keys` 属性影响原数组
 - 修复 `n-select` 砸爱 multiple filterable 模式下输入框有无用的空行
 - 修复 `n-button` 的 loading 图标在 iOS Safari 上不显示，关闭 [#219](https://github.com/TuSimple/naive-ui/issues/219)
+- 修复 `n-date-picker` 非 clearable 不显示图标
+- 修复 `n-time-picker` clearable 状态下图标位置不正确，关闭 [#222](https://github.com/TuSimple/naive-ui/issues/222)
 
 ## 2.12.2 (2021-06-19)
 
diff --git a/src/date-picker/src/DatePicker.tsx b/src/date-picker/src/DatePicker.tsx
index edfc361f0..f3b1692b2 100644
--- a/src/date-picker/src/DatePicker.tsx
+++ b/src/date-picker/src/DatePicker.tsx
@@ -620,13 +620,14 @@ export default defineComponent({
     }
   },
   render () {
+    const { clearable } = this
     const commonInputProps: InputProps = {
       bordered: this.mergedBordered,
       size: this.mergedSize,
       passivelyActivated: true,
       disabled: this.disabled,
       readonly: this.disabled,
-      clearable: this.clearable,
+      clearable,
       onClear: this.handleClear,
       onClick: this.handleTriggerClick,
       onActivate: this.handleInputActivate,
@@ -693,7 +694,7 @@ export default defineComponent({
                               {{ default: () => <ToIcon /> }}
                             </NBaseIcon>
                           ),
-                          clear: () => (
+                          [clearable ? 'clear' : 'suffix']: () => (
                             <NBaseIcon
                               clsPrefix={mergedClsPrefix}
                               class={`${mergedClsPrefix}-date-picker-icon`}
@@ -721,7 +722,7 @@ export default defineComponent({
                         {...commonInputProps}
                       >
                         {{
-                          clear: () => (
+                          [clearable ? 'clear' : 'suffix']: () => (
                             <NBaseIcon
                               clsPrefix={mergedClsPrefix}
                               class={`${mergedClsPrefix}-date-picker-icon`}
diff --git a/src/time-picker/src/TimePicker.tsx b/src/time-picker/src/TimePicker.tsx
index 86e298746..3152cf3a2 100644
--- a/src/time-picker/src/TimePicker.tsx
+++ b/src/time-picker/src/TimePicker.tsx
@@ -621,7 +621,7 @@ export default defineComponent({
                     >
                       {this.showIcon
                         ? {
-                            suffix: () => (
+                            [this.clearable ? 'clear' : 'suffix']: () => (
                               <NBaseIcon
                                 clsPrefix={mergedClsPrefix}
                                 class={`${mergedClsPrefix}-time-picker-icon`}