diff --git a/core/api.txt b/core/api.txt index ccbccd1bf4..b8b7919177 100644 --- a/core/api.txt +++ b/core/api.txt @@ -435,7 +435,7 @@ ion-input,prop,size,number | undefined,undefined,false,false ion-input,prop,spellcheck,boolean,false,false,false ion-input,prop,step,string | undefined,undefined,false,false ion-input,prop,type,"date" | "email" | "number" | "password" | "search" | "tel" | "text" | "time" | "url",'text',false,false -ion-input,prop,value,null | string | undefined,'',false,false +ion-input,prop,value,null | number | string | undefined,'',false,false ion-input,method,getInputElement,getInputElement() => Promise ion-input,method,setFocus,setFocus() => Promise ion-input,event,ionBlur,void,true diff --git a/core/src/components.d.ts b/core/src/components.d.ts index b8a7c5f964..a548e96d64 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -978,7 +978,7 @@ export namespace Components { /** * The value of the input. */ - 'value'?: string | null; + 'value'?: string | number | null; } interface IonItem { /** @@ -4232,7 +4232,7 @@ declare namespace LocalJSX { /** * The value of the input. */ - 'value'?: string | null; + 'value'?: string | number | null; } interface IonItem { /** diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx index 555554726a..8322607383 100644 --- a/core/src/components/input/input.tsx +++ b/core/src/components/input/input.tsx @@ -169,7 +169,7 @@ export class Input implements ComponentInterface { /** * The value of the input. */ - @Prop({ mutable: true }) value?: string | null = ''; + @Prop({ mutable: true }) value?: string | number | null = ''; /** * Update the native input element when the value changes @@ -177,7 +177,7 @@ export class Input implements ComponentInterface { @Watch('value') protected valueChanged() { this.emitStyle(); - this.ionChange.emit({ value: this.value }); + this.ionChange.emit({ value: this.value == null ? this.value : this.value.toString() }); } /** @@ -263,7 +263,8 @@ export class Input implements ComponentInterface { } private getValue(): string { - return this.value || ''; + return typeof this.value === 'number' ? this.value.toString() : + (this.value || '').toString(); } private emitStyle() { diff --git a/core/src/components/input/readme.md b/core/src/components/input/readme.md index e36e6a8006..d2bf31568a 100644 --- a/core/src/components/input/readme.md +++ b/core/src/components/input/readme.md @@ -238,7 +238,7 @@ export const InputExample: React.FC = () => ( | `spellcheck` | `spellcheck` | If `true`, the element will have its spelling and grammar checked. | `boolean` | `false` | | `step` | `step` | Works with the min and max attributes to limit the increments at which a value can be set. Possible values are: `"any"` or a positive floating point number. | `string \| undefined` | `undefined` | | `type` | `type` | The type of control to display. The default type is text. | `"date" \| "email" \| "number" \| "password" \| "search" \| "tel" \| "text" \| "time" \| "url"` | `'text'` | -| `value` | `value` | The value of the input. | `null \| string \| undefined` | `''` | +| `value` | `value` | The value of the input. | `null \| number \| string \| undefined` | `''` | ## Events