From 1f918835f437a59f7a70fc59d9305647aa9c298d Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Thu, 27 Jan 2022 12:29:52 -0500 Subject: [PATCH] fix(input): min/max compatibility with react-hook-form (#24657) Resolves #24489 --- core/api.txt | 4 ++-- core/src/components.d.ts | 8 ++++---- core/src/components/input/input.tsx | 4 ++-- core/src/components/input/readme.md | 4 ++-- 4 files changed, 10 insertions(+), 10 deletions(-) diff --git a/core/api.txt b/core/api.txt index 2cd7de4b6a..78850d3f28 100644 --- a/core/api.txt +++ b/core/api.txt @@ -519,9 +519,9 @@ ion-input,prop,debounce,number,0,false,false ion-input,prop,disabled,boolean,false,false,false ion-input,prop,enterkeyhint,"done" | "enter" | "go" | "next" | "previous" | "search" | "send" | undefined,undefined,false,false ion-input,prop,inputmode,"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url" | undefined,undefined,false,false -ion-input,prop,max,string | undefined,undefined,false,false +ion-input,prop,max,number | string | undefined,undefined,false,false ion-input,prop,maxlength,number | undefined,undefined,false,false -ion-input,prop,min,string | undefined,undefined,false,false +ion-input,prop,min,number | string | undefined,undefined,false,false ion-input,prop,minlength,number | undefined,undefined,false,false ion-input,prop,mode,"ios" | "md",undefined,false,false ion-input,prop,multiple,boolean | undefined,undefined,false,false diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 69025e5fb7..1cbc638898 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -1051,7 +1051,7 @@ export namespace Components { /** * The maximum value, which must not be less than its minimum (min attribute) value. */ - "max"?: string; + "max"?: string | number; /** * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter. */ @@ -1059,7 +1059,7 @@ export namespace Components { /** * The minimum value, which must not be greater than its maximum (max attribute) value. */ - "min"?: string; + "min"?: string | number; /** * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter. */ @@ -4753,7 +4753,7 @@ declare namespace LocalJSX { /** * The maximum value, which must not be less than its minimum (min attribute) value. */ - "max"?: string; + "max"?: string | number; /** * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter. */ @@ -4761,7 +4761,7 @@ declare namespace LocalJSX { /** * The minimum value, which must not be greater than its maximum (max attribute) value. */ - "min"?: string; + "min"?: string | number; /** * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter. */ diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx index d34ea8cccf..28121cf27f 100644 --- a/core/src/components/input/input.tsx +++ b/core/src/components/input/input.tsx @@ -117,7 +117,7 @@ export class Input implements ComponentInterface { /** * The maximum value, which must not be less than its minimum (min attribute) value. */ - @Prop() max?: string; + @Prop() max?: string | number; /** * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter. @@ -127,7 +127,7 @@ export class Input implements ComponentInterface { /** * The minimum value, which must not be greater than its maximum (max attribute) value. */ - @Prop() min?: string; + @Prop() min?: string | number; /** * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter. diff --git a/core/src/components/input/readme.md b/core/src/components/input/readme.md index 8b601fe741..a3e74db9a9 100644 --- a/core/src/components/input/readme.md +++ b/core/src/components/input/readme.md @@ -332,9 +332,9 @@ export default defineComponent({ | `disabled` | `disabled` | If `true`, the user cannot interact with the input. | `boolean` | `false` | | `enterkeyhint` | `enterkeyhint` | A hint to the browser for which enter key to display. Possible values: `"enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, and `"send"`. | `"done" \| "enter" \| "go" \| "next" \| "previous" \| "search" \| "send" \| undefined` | `undefined` | | `inputmode` | `inputmode` | A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`. | `"decimal" \| "email" \| "none" \| "numeric" \| "search" \| "tel" \| "text" \| "url" \| undefined` | `undefined` | -| `max` | `max` | The maximum value, which must not be less than its minimum (min attribute) value. | `string \| undefined` | `undefined` | +| `max` | `max` | The maximum value, which must not be less than its minimum (min attribute) value. | `number \| string \| undefined` | `undefined` | | `maxlength` | `maxlength` | If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter. | `number \| undefined` | `undefined` | -| `min` | `min` | The minimum value, which must not be greater than its maximum (max attribute) value. | `string \| undefined` | `undefined` | +| `min` | `min` | The minimum value, which must not be greater than its maximum (max attribute) value. | `number \| string \| undefined` | `undefined` | | `minlength` | `minlength` | If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter. | `number \| undefined` | `undefined` | | `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | | `multiple` | `multiple` | If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `"email"` or `"file"`, otherwise it is ignored. | `boolean \| undefined` | `undefined` |