fix(input): input-props override the props (#1576)

* fix(#1553):`input-props` override the props * fix:remove char
tusen-ai · Nov 14, 2021 · 15b2145 · 15b2145
1 parent 792fc28
commit 15b2145
Show file tree

Hide file tree

Showing 7 changed files with 74 additions and 5 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -4,6 +4,10 @@
 
 ### Fixes
 
+- Fix `input-props` does not set the right props, closes [#1553](https://github.com/TuSimple/naive-ui/issues/1553)
+
+### Fixes
+
 - Fix `n-grid` suffix NGridItem does not set right span when collapsed, closes [#1530](https://github.com/TuSimple/naive-ui/issues/1530).
 - Fix `n-button` to shrink abnormally in certain scenarios when using the `circle` prop, closes [#1557](https://github.com/TuSimple/naive-ui/issues/1557).
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -4,6 +4,10 @@
 
 ### Fixes
 
+- 修复 `input-props` 无法生效的问题，关闭 [#1553](https://github.com/TuSimple/naive-ui/issues/1553)
+
+### Fixes
+
 - 修复 `n-grid` 收缩时后缀 girdItem 设置的 span 不起作用，关闭 [#1530](https://github.com/TuSimple/naive-ui/issues/1530)
 - 修复 `n-button` 使用 `circle` 属性时在特定场景异常收缩的问题，关闭 [#1557](https://github.com/TuSimple/naive-ui/issues/1557)
 

diff --git a/src/input/demos/enUS/index.demo-entry.md b/src/input/demos/enUS/index.demo-entry.md
@@ -19,6 +19,7 @@ passively-activated
 count
 focus
 event
+input-props
 ```
 
 ## API
@@ -32,7 +33,7 @@ event
 | clearable | `boolean` | `false` | Whether the input is clearable. |
 | default-value | `string \| [string, string] \| null` | `null` | Default value when not manually set. |
 | disabled | `boolean` | `false` | Whether to disable the input. |
-| input-props | `HTMLInputAttributes` | `undefined` | The props of the input element inside the component. This is disabled if the `pair` property is true. |
+| input-props | `HTMLInputAttributes` | `undefined` | Warning：It will override props with the same name. The props of the input element inside the component. This is disabled if the `pair` property is true.[see here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) |
 | loading | `boolean` | `undefined` | Set loading state. If set (true/false), the element will always take up enough space for the loading indicator. |
 | maxlength | `number` | `undefined` | Maximum input length. |
 | minlength | `number` | `undefined` | Minimum input length. |

diff --git a/src/input/demos/enUS/input-props.demo.md b/src/input/demos/enUS/input-props.demo.md
@@ -0,0 +1,30 @@
+# InputProps
+
+the original input props
+
+```html
+<n-space vertical>
+  <n-input
+    :input-props="{type:'url'}"
+    v-model:value="value"
+    placeholder="URL"
+  />
+  <n-input
+    :input-props="{type:'tel'}"
+    v-model:value="value"
+    placeholder="Tel"
+  />
+</n-space>
+```
+
+```js
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
+    return {
+      value: ref(null)
+    }
+  }
+})
+```
diff --git a/src/input/demos/zhCN/index.demo-entry.md b/src/input/demos/zhCN/index.demo-entry.md
@@ -18,6 +18,7 @@ input-group
 passively-activated
 count
 focus
+input-props
 ```
 
 ## API
@@ -31,7 +32,7 @@ focus
 | clearable | `boolean` | `false` | 是否可清空 |
 | default-value | `string \| [string, string] \| null` | `null` | 输入框默认值 |
 | disabled | `boolean` | `false` | 是否禁用 |
-| input-props | `HTMLInputAttributes` | `undefined` | 组件中 input 元素的属性，对 `pair` 类型不生效 |
+| input-props | `HTMLInputAttributes` | `undefined` | 警告：input-props 会覆盖同名 props 组件中 input 元素的属性，对 `pair` 类型不生效 [在这里查看原生属性](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) |
 | loading | `boolean` | `undefined` | 是否展示加载图标，设为非 `undefined` 会占据空间 |
 | maxlength | `number` | `undefined` | 最大输入长度 |
 | minlength | `number` | `undefined` | 最小输入长度 |

diff --git a/src/input/demos/zhCN/input-props.demo.md b/src/input/demos/zhCN/input-props.demo.md
@@ -0,0 +1,30 @@
+# 原生属性
+
+想来它本应如此，这是它最初的样子
+
+```html
+<n-space vertical>
+  <n-input
+    :input-props="{type:'url'}"
+    v-model:value="value"
+    placeholder="URL"
+  />
+  <n-input
+    :input-props="{type:'tel'}"
+    v-model:value="value"
+    placeholder="Tel"
+  />
+</n-space>
+```
+
+```js
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
+    return {
+      value: ref(null)
+    }
+  }
+})
+```
diff --git a/src/input/src/Input.tsx b/src/input/src/Input.tsx
@@ -201,7 +201,6 @@ export default defineComponent({
         return [placeholder] as [string]
       }
     })
-
     const showPlaceholder1Ref = computed(() => {
       const { value: isComposing } = isComposingRef
       const { value: mergedValue } = mergedValueRef
@@ -876,7 +875,6 @@ export default defineComponent({
           {this.type === 'textarea' ? (
             <div class={`${mergedClsPrefix}-input__textarea`}>
               <textarea
-                {...this.inputProps}
                 ref="textareaElRef"
                 class={`${mergedClsPrefix}-input__textarea-el`}
                 autofocus={this.autofocus}
@@ -895,6 +893,7 @@ export default defineComponent({
                 onFocus={this.handleInputFocus}
                 onInput={this.handleInput}
                 onChange={this.handleChange}
+                {...this.inputProps}
               />
               {this.showPlaceholder1 ? (
                 <div
@@ -921,7 +920,6 @@ export default defineComponent({
           ) : (
             <div class={`${mergedClsPrefix}-input__input`}>
               <input
-                {...this.inputProps}
                 ref="inputElRef"
                 type={
                   this.type === 'password' &&
@@ -951,6 +949,7 @@ export default defineComponent({
                 onFocus={this.handleInputFocus}
                 onInput={(e) => this.handleInput(e, 0)}
                 onChange={(e) => this.handleChange(e, 0)}
+                {...this.inputProps}
               />
               {this.showPlaceholder1 ? (
                 <div class={`${mergedClsPrefix}-input__placeholder`}>