fix(core): updating type of input value to accept numbers, fixes #20173 (#20267)

This commit is contained in:
Ely Lucas
2020-01-23 11:15:22 -07:00
parent 5d8e0ed703
commit 3a56228290
4 changed files with 8 additions and 7 deletions

View File

@ -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<HTMLInputElement>
ion-input,method,setFocus,setFocus() => Promise<void>
ion-input,event,ionBlur,void,true

View File

@ -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 {
/**

View File

@ -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() {

View File

@ -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