fix(input): fix clearable position (#431)

* fix(input): fix clearable position

* Update CHANGELOG.zh-CN.md

Co-authored-by: 07akioni <07akioni2@gmail.com>

CHANGELOG.en-US.md

@@ -4,6 +4,7 @@
 
 - Fix `n-select` bug in using custom label, closes [#352](https://github.com/TuSimple/naive-ui/issues/352).
 - Fix `n-carousel` when `autoplay` dot active status isn't displayed correctly, closes [#434](https://github.com/TuSimple/naive-ui/issues/434).
+- Fix `n-input` fixed clearable position, closes [#428](https://github.com/TuSimple/naive-ui/issues/428).
 
 ### Feats
 

CHANGELOG.zh-CN.md

@@ -4,6 +4,7 @@
 
 - 修复 `n-select` 自定义 label 的显示问题，关闭 [#352](https://github.com/TuSimple/naive-ui/issues/352)
 - 修复 `n-carousel` 设定 `autoplay` 点击后 dot active 状态不正常，关闭 [#434](https://github.com/TuSimple/naive-ui/issues/434)
+- 修复 `n-input` 清空按钮位置引起的样式问题，关闭 [#428](https://github.com/TuSimple/naive-ui/issues/428)
 
 ### Feats
 

src/input/src/Input.tsx

@@ -943,7 +943,6 @@ export default defineComponent({
             this.loading !== undefined) ? (
             <div class={`${mergedClsPrefix}-input__suffix`}>
               {[
-                renderSlot(this.$slots, 'suffix'),
                 this.clearable || this.$slots.clear ? (
                   <NBaseClear
                     clsPrefix={mergedClsPrefix}
@@ -953,6 +952,7 @@ export default defineComponent({
                     {{ default: () => renderSlot(this.$slots, 'clear') }}
                   </NBaseClear>
                 ) : null,
+                renderSlot(this.$slots, 'suffix'),
                 this.loading !== undefined ? (
                   <NBaseSuffix
                     clsPrefix={mergedClsPrefix}
@@ -1025,7 +1025,6 @@ export default defineComponent({
             </div>
             <div class={`${mergedClsPrefix}-input__suffix`}>
               {[
-                renderSlot(this.$slots, 'suffix'),
                 this.clearable || this.$slots.clear ? (
                   <NBaseClear
                     clsPrefix={mergedClsPrefix}
@@ -1034,7 +1033,8 @@ export default defineComponent({
                   >
                     {{ default: () => renderSlot(this.$slots, 'clear') }}
                   </NBaseClear>
-                ) : null
+                ) : null,
+                renderSlot(this.$slots, 'suffix')
               ]}
             </div>
           </div>