fix(input-otp): update implementation to match input's more closely

Author: brandyscarney

core/api.txt

@@ -784,16 +784,16 @@ ion-input-otp,scoped
 ion-input-otp,prop,allowedKeys,string | undefined,undefined,false,false
 ion-input-otp,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-input-otp,prop,disabled,boolean,false,false,true
-ion-input-otp,prop,fill,"outline" | "solid",'outline',false,false
+ion-input-otp,prop,fill,"outline" | "solid" | undefined,'outline',false,false
 ion-input-otp,prop,inputmode,"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url" | undefined,undefined,false,false
 ion-input-otp,prop,length,number,4,false,false
 ion-input-otp,prop,separators,number[] | string | undefined,undefined,false,false
 ion-input-otp,prop,shape,"rectangular" | "round" | "soft",'round',false,false
 ion-input-otp,prop,size,"large" | "medium" | "small",'medium',false,false
 ion-input-otp,prop,type,"number" | "text",'number',false,false
-ion-input-otp,prop,value,string | undefined,'',false,false
-ion-input-otp,event,ionChange,InputOTPChangeEventDetail,true
-ion-input-otp,event,ionComplete,InputOTPCompleteEventDetail,true
+ion-input-otp,prop,value,null | number | string | undefined,'',false,false
+ion-input-otp,event,ionChange,InputOtpChangeEventDetail,true
+ion-input-otp,event,ionComplete,InputOtpCompleteEventDetail,true
 ion-input-otp,css-prop,--background,ios
 ion-input-otp,css-prop,--background,md
 ion-input-otp,css-prop,--background-focused,ios
@@ -810,8 +810,8 @@ ion-input-otp,css-prop,--color,ios
 ion-input-otp,css-prop,--color,md
 ion-input-otp,css-prop,--height,ios
 ion-input-otp,css-prop,--height,md
-ion-input-otp,css-prop,--highlight-color,ios
-ion-input-otp,css-prop,--highlight-color,md
+ion-input-otp,css-prop,--highlight-color-invalid,ios
+ion-input-otp,css-prop,--highlight-color-invalid,md
 ion-input-otp,css-prop,--margin-bottom,ios
 ion-input-otp,css-prop,--margin-bottom,md
 ion-input-otp,css-prop,--margin-end,ios

core/src/components.d.ts

@@ -18,7 +18,7 @@ import { ScrollBaseDetail, ScrollDetail } from "./components/content/content-int
 import { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, FormatOptions, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
 import { SpinnerTypes } from "./components/spinner/spinner-configs";
 import { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
-import { InputOTPChangeEventDetail, InputOTPCompleteEventDetail } from "./components/input-otp/input-otp";
+import { InputOtpChangeEventDetail, InputOtpCompleteEventDetail } from "./components/input-otp/input-otp-interface";
 import { MenuChangeEventDetail, MenuCloseEventDetail, MenuType, Side } from "./components/menu/menu-interface";
 import { ModalBreakpointChangeEventDetail, ModalHandleBehavior } from "./components/modal/modal-interface";
 import { NavComponent, NavComponentWithProps, NavOptions, RouterOutletOptions, SwipeGestureHandler, TransitionDoneFn, TransitionInstruction } from "./components/nav/nav-interface";
@@ -56,7 +56,7 @@ export { ScrollBaseDetail, ScrollDetail } from "./components/content/content-int
 export { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, FormatOptions, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
 export { SpinnerTypes } from "./components/spinner/spinner-configs";
 export { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
-export { InputOTPChangeEventDetail, InputOTPCompleteEventDetail } from "./components/input-otp/input-otp";
+export { InputOtpChangeEventDetail, InputOtpCompleteEventDetail } from "./components/input-otp/input-otp-interface";
 export { MenuChangeEventDetail, MenuCloseEventDetail, MenuType, Side } from "./components/menu/menu-interface";
 export { ModalBreakpointChangeEventDetail, ModalHandleBehavior } from "./components/modal/modal-interface";
 export { NavComponent, NavComponentWithProps, NavOptions, RouterOutletOptions, SwipeGestureHandler, TransitionDoneFn, TransitionInstruction } from "./components/nav/nav-interface";
@@ -1327,45 +1327,45 @@ export namespace Components {
          */
         "allowedKeys"?: string;
         /**
-          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          */
         "color"?: Color;
         /**
-          * Whether the input is disabled
+          * If `true`, the user cannot interact with the input.
          */
         "disabled": boolean;
         /**
-          * The fill style of the input boxes
+          * The fill for the input boxes. If `"solid"` the input boxes will have a background. If `"outline"` the input boxes will be transparent with a border.
          */
-        "fill": 'solid' | 'outline';
+        "fill"?: 'outline' | 'solid';
         /**
           * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.  For numbers (type="number"): "numeric" For text (type="text"): "text"
          */
         "inputmode"?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
         /**
-          * The number of input boxes to display
+          * The number of input boxes to display.
          */
         "length": number;
         /**
-          * Where separators should be shown between input boxes. Can be a comma-separated string or an array of numbers. For example: "3" would show a separator after the 3rd input box. [1,4] would show a separator after the 1st and 4th input boxes.
+          * Where separators should be shown between input boxes. Can be a comma-separated string or an array of numbers.  For example: `"3"` will show a separator after the 3rd input box. `[1,4]` will show a separator after the 1st and 4th input boxes. `"all"` will show a separator between every input box.
          */
         "separators"?: 'all' | string | number[];
         /**
-          * The shape of the input boxes
+          * The shape of the input boxes. If "round" they will have an increased border radius. If "rectangular" they will have no border radius. If "soft" they will have a soft border radius.
          */
         "shape": 'round' | 'rectangular' | 'soft';
         /**
-          * The size of the input boxes
+          * The size of the input boxes.
          */
         "size": 'small' | 'medium' | 'large';
         /**
-          * The type of input allowed in the boxes
+          * The type of input allowed in the input boxes.
          */
         "type": 'text' | 'number';
         /**
-          * The value of the OTP input
+          * The value of the OTP input.
          */
-        "value"?: string;
+        "value"?: string | number | null;
     }
     interface IonInputPasswordToggle {
         /**
@@ -3986,8 +3986,8 @@ declare global {
         new (): HTMLIonInputElement;
     };
     interface HTMLIonInputOtpElementEventMap {
-        "ionChange": InputOTPChangeEventDetail;
-        "ionComplete": InputOTPCompleteEventDetail;
+        "ionChange": InputOtpChangeEventDetail;
+        "ionComplete": InputOtpCompleteEventDetail;
     }
     interface HTMLIonInputOtpElement extends Components.IonInputOtp, HTMLStencilElement {
         addEventListener<K extends keyof HTMLIonInputOtpElementEventMap>(type: K, listener: (this: HTMLIonInputOtpElement, ev: IonInputOtpCustomEvent<HTMLIonInputOtpElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -6255,53 +6255,53 @@ declare namespace LocalJSX {
          */
         "allowedKeys"?: string;
         /**
-          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          */
         "color"?: Color;
         /**
-          * Whether the input is disabled
+          * If `true`, the user cannot interact with the input.
          */
         "disabled"?: boolean;
         /**
-          * The fill style of the input boxes
+          * The fill for the input boxes. If `"solid"` the input boxes will have a background. If `"outline"` the input boxes will be transparent with a border.
          */
-        "fill"?: 'solid' | 'outline';
+        "fill"?: 'outline' | 'solid';
         /**
           * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.  For numbers (type="number"): "numeric" For text (type="text"): "text"
          */
         "inputmode"?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
         /**
-          * The number of input boxes to display
+          * The number of input boxes to display.
          */
         "length"?: number;
         /**
           * Emitted when the value changes
          */
-        "onIonChange"?: (event: IonInputOtpCustomEvent<InputOTPChangeEventDetail>) => void;
+        "onIonChange"?: (event: IonInputOtpCustomEvent<InputOtpChangeEventDetail>) => void;
         /**
           * Emitted when the input is complete (all boxes filled)
          */
-        "onIonComplete"?: (event: IonInputOtpCustomEvent<InputOTPCompleteEventDetail>) => void;
+        "onIonComplete"?: (event: IonInputOtpCustomEvent<InputOtpCompleteEventDetail>) => void;
         /**
-          * Where separators should be shown between input boxes. Can be a comma-separated string or an array of numbers. For example: "3" would show a separator after the 3rd input box. [1,4] would show a separator after the 1st and 4th input boxes.
+          * Where separators should be shown between input boxes. Can be a comma-separated string or an array of numbers.  For example: `"3"` will show a separator after the 3rd input box. `[1,4]` will show a separator after the 1st and 4th input boxes. `"all"` will show a separator between every input box.
          */
         "separators"?: 'all' | string | number[];
         /**
-          * The shape of the input boxes
+          * The shape of the input boxes. If "round" they will have an increased border radius. If "rectangular" they will have no border radius. If "soft" they will have a soft border radius.
          */
         "shape"?: 'round' | 'rectangular' | 'soft';
         /**
-          * The size of the input boxes
+          * The size of the input boxes.
          */
         "size"?: 'small' | 'medium' | 'large';
         /**
-          * The type of input allowed in the boxes
+          * The type of input allowed in the input boxes.
          */
         "type"?: 'text' | 'number';
         /**
-          * The value of the OTP input
+          * The value of the OTP input.
          */
-        "value"?: string;
+        "value"?: string | number | null;
     }
     interface IonInputPasswordToggle {
         /**

core/src/components/input-otp/input-otp-interface.ts

@@ -0,0 +1,20 @@
+/**
+ * Values are converted to strings when emitted which is
+ * why we do not have a `number` type here even though the
+ * `value` prop accepts a `number` type.
+ */
+export interface InputOtpChangeEventDetail {
+  complete: boolean;
+  value: string | null;
+  event?: Event;
+}
+
+export interface InputOtpCompleteEventDetail {
+  value?: string | null;
+  event?: Event;
+}
+
+export interface InputOtpCustomEvent<T = InputOtpChangeEventDetail> extends CustomEvent {
+  detail: T;
+  target: HTMLIonInputOtpElement;
+}

core/src/components/input-otp/input-otp.scss

@@ -87,8 +87,8 @@
   height: var(--height);
 
   border-width: var(--border-width);
-  border-color: var(--border-color);
   border-style: solid;
+  border-color: var(--border-color);
 
   background: var(--background, var(--ion-background-color));
   color: var(--color, var(--ion-text-color));

core/src/components/input-otp/input-otp.tsx

@@ -5,18 +5,7 @@ import { createColorClasses } from '@utils/theme';
 import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';
 
-export interface InputOTPChangeEventDetail {
-  value: string;
-  complete: boolean;
-}
-
-export interface InputOTPCompleteEventDetail {
-  value: string;
-}
-
-export interface HTMLIonInputOTPElement extends HTMLElement {
-  value?: string;
-}
+import type { InputOtpChangeEventDetail, InputOtpCompleteEventDetail } from './input-otp-interface';
 
 @Component({
   tag: 'ion-input-otp',
@@ -30,34 +19,28 @@ export class InputOTP implements ComponentInterface {
   private inputRefs: HTMLInputElement[] = [];
   private inputId = `ion-input-otp-${inputIds++}`;
 
-  @Element() el!: HTMLIonInputOTPElement;
+  @Element() el!: HTMLIonInputOtpElement;
 
   @State() private inputValues: string[] = [];
   @State() hasFocus = false;
 
   /**
    * The color to use from your application's color palette.
    * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+   * For more information on colors, see [theming](/docs/theming/basics).
    */
   @Prop({ reflect: true }) color?: Color;
 
   /**
-   * The number of input boxes to display
-   */
-  @Prop() length = 4;
-
-  /**
-   * The type of input allowed in the boxes
+   * If `true`, the user cannot interact with the input.
    */
-  @Prop() type: 'text' | 'number' = 'number';
+  @Prop({ reflect: true }) disabled = false;
 
   /**
-   * A regex pattern string for allowed characters. Defaults based on type.
-   *
-   * For numbers (type="number"): "[0-9]"
-   * For text (type="text"): "[a-zA-Z0-9]"
+   * The fill for the input boxes. If `"solid"` the input boxes will have a background. If
+   * `"outline"` the input boxes will be transparent with a border.
    */
-  @Prop() allowedKeys?: string;
+  @Prop() fill?: 'outline' | 'solid' = 'outline';
 
   /**
    * A hint to the browser for which keyboard to display.
@@ -70,48 +53,61 @@ export class InputOTP implements ComponentInterface {
   @Prop() inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
 
   /**
-   * The size of the input boxes
+   * The number of input boxes to display.
+   */
+  @Prop() length = 4;
+
+  /**
+   * A regex pattern string for allowed characters. Defaults based on type.
+   *
+   * For numbers (type="number"): "[0-9]"
+   * For text (type="text"): "[a-zA-Z0-9]"
+   */
+  @Prop() allowedKeys?: string;
+
+  /**
+   * The size of the input boxes.
    */
   @Prop() size: 'small' | 'medium' | 'large' = 'medium';
 
   /**
    * Where separators should be shown between input boxes.
    * Can be a comma-separated string or an array of numbers.
+   *
    * For example:
-   * "3" would show a separator after the 3rd input box.
-   * [1,4] would show a separator after the 1st and 4th input boxes.
+   * `"3"` will show a separator after the 3rd input box.
+   * `[1,4]` will show a separator after the 1st and 4th input boxes.
+   * `"all"` will show a separator between every input box.
    */
   @Prop() separators?: 'all' | string | number[];
 
   /**
-   * The fill style of the input boxes
-   */
-  @Prop() fill: 'solid' | 'outline' = 'outline';
-
-  /**
-   * The shape of the input boxes
+   * The shape of the input boxes.
+   * If "round" they will have an increased border radius.
+   * If "rectangular" they will have no border radius.
+   * If "soft" they will have a soft border radius.
    */
   @Prop() shape: 'round' | 'rectangular' | 'soft' = 'round';
 
   /**
-   * Whether the input is disabled
+   * The type of input allowed in the input boxes.
    */
-  @Prop({ reflect: true }) disabled = false;
+  @Prop() type: 'text' | 'number' = 'number';
 
   /**
-   * The value of the OTP input
+   * The value of the OTP input.
    */
-  @Prop({ mutable: true }) value?: string = '';
+  @Prop({ mutable: true }) value?: string | number | null = '';
 
   /**
    * Emitted when the value changes
    */
-  @Event() ionChange!: EventEmitter<InputOTPChangeEventDetail>;
+  @Event() ionChange!: EventEmitter<InputOtpChangeEventDetail>;
 
   /**
    * Emitted when the input is complete (all boxes filled)
    */
-  @Event() ionComplete!: EventEmitter<InputOTPCompleteEventDetail>;
+  @Event() ionComplete!: EventEmitter<InputOtpCompleteEventDetail>;
 
   @Watch('value')
   valueChanged() {
@@ -123,8 +119,8 @@ export class InputOTP implements ComponentInterface {
   }
 
   private initializeValues() {
-    if (this.value && this.value.length > 0) {
-      const chars = this.value.split('').slice(0, this.length);
+    if (this.value != null && String(this.value).length > 0) {
+      const chars = String(this.value).split('').slice(0, this.length);
       chars.forEach((char, index) => {
         if (this.validKeys.test(char.toLowerCase())) {
           this.inputValues[index] = char;

core/src/components/input-otp/test/basic/index.html

@@ -41,7 +41,7 @@
             <h2>Default</h2>
             <ion-input-otp> Didn't get a code? <a href="#">Resend the code</a> </ion-input-otp>
             <ion-input-otp length="2"> Didn't get a code? <a href="#">Resend the code</a> </ion-input-otp>
-            <ion-input-otp value="123" length="6"> Didn't get a code? <a href="#">Resend the code</a> </ion-input-otp>
+            <ion-input-otp id="numberValue" length="6"> Didn't get a code? <a href="#">Resend the code</a> </ion-input-otp>
             <ion-input-otp value="5893" length="8"> Didn't get a code? <a href="#">Resend the code</a> </ion-input-otp>
           </div>
 
@@ -65,6 +65,11 @@ <h2>Types</h2>
           </div>
         </div>
       </ion-content>
+
+      <script>
+        const numberValue = document.getElementById('numberValue');
+        numberValue.value = 123;
+      </script>
     </ion-app>
   </body>
 </html>