fix(frontend): trigger numeric keypad for Currency Input on iOS

app/client/src/widgets/BaseInputWidget/component/__tests__/getInputMode.test.ts

@@ -0,0 +1,21 @@
+import { InputMode } from "../../constants";
+import { getInputMode } from "../index";
+
+describe("getInputMode", () => {
+  it('maps NUMBER to InputMode.DECIMAL ("decimal")', () => {
+    expect(getInputMode("NUMBER")).toBe(InputMode.DECIMAL);
+  });
+
+  it('maps TEL to InputMode.TEL ("tel")', () => {
+    expect(getInputMode("TEL")).toBe(InputMode.TEL);
+  });
+
+  it('maps EMAIL to InputMode.EMAIL ("email")', () => {
+    expect(getInputMode("EMAIL")).toBe(InputMode.EMAIL);
+  });
+
+  it("returns undefined for default/unknown type", () => {
+    expect(getInputMode()).toBeUndefined();
+    expect(getInputMode("TEXT")).toBeUndefined();
+  });
+});

app/client/src/widgets/BaseInputWidget/component/index.tsx

@@ -17,8 +17,8 @@ import {
   createMessage,
   INPUT_WIDGET_DEFAULT_VALIDATION_ERROR,
 } from "ee/constants/messages";
+import { InputMode, InputTypes } from "../constants";
 import type { NumberInputStepButtonPosition } from "../constants";
-import { InputTypes } from "../constants";
 
 // TODO(abhinav): All of the following imports should not be in widgets.
 import ErrorTooltip from "components/editorComponents/ErrorTooltip";
@@ -424,6 +424,26 @@ export const isNumberInputType = (inputHTMLType: InputHTMLType = "TEXT") => {
   return inputHTMLType === "NUMBER";
 };
 
+/**
+ * Maps input type to appropriate HTML5 inputmode attribute for mobile keyboards
+ * Provides optimal keyboard experience across iOS and Android
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode
+ */
+export const getInputMode = (
+  inputType: InputHTMLType = "TEXT",
+): InputMode | undefined => {
+  switch (inputType) {
+    case "NUMBER":
+      return InputMode.DECIMAL;
+    case "TEL":
+      return InputMode.TEL;
+    case "EMAIL":
+      return InputMode.EMAIL;
+    default:
+      return undefined;
+  }
+};
+
 class BaseInputComponent extends React.Component<
   BaseInputComponentProps,
   InputComponentState
@@ -500,6 +520,12 @@ class BaseInputComponent extends React.Component<
     }
   }
 
+  private getInputMode = (
+    inputType: InputHTMLType = "TEXT",
+  ): InputMode | undefined => {
+    return getInputMode(inputType);
+  };
+
   onKeyDownTextArea = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
     const isEnterKey = e.key === "Enter" || e.keyCode === 13;
 
@@ -606,6 +632,7 @@ class BaseInputComponent extends React.Component<
           (this.props.rtl ? " rtl" : "")
         }
         disabled={this.props.disabled}
+        inputMode={this.getInputMode(this.props.inputHTMLType)}
         inputRef={this.props.inputRef as IRef<HTMLInputElement>}
         intent={this.props.intent}
         leftIcon={this.getLeftIcon()}

app/client/src/widgets/BaseInputWidget/constants.ts

@@ -6,10 +6,34 @@ export enum InputTypes {
   EMAIL = "EMAIL",
   PASSWORD = "PASSWORD",
   CURRENCY = "CURRENCY",
+  NONE = "none",
 }
 
 export enum NumberInputStepButtonPosition {
   LEFT = "left",
   RIGHT = "right",
   NONE = "none",
 }
+
+/**
+ * HTML5 inputmode attribute values
+ * Controls the virtual keyboard displayed on mobile devices
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode
+ */
+export enum InputMode {
+  // Shows numeric keypad with 0-9
+  NUMERIC = "numeric",
+  NONE = "none",
+  // Shows numeric keypad with 0-9 and decimal point (.)
+  DECIMAL = "decimal",
+  // Shows phone keypad with 0-9, *, # and standard dial keys
+  TEL = "tel",
+  // Shows email keyboard with @, period, and other email-related keys
+  EMAIL = "email",
+  // Shows default text keyboard
+  TEXT = "text",
+  // Shows search optimized keyboard
+  SEARCH = "search",
+  // Shows URL optimized keyboard with / and .com
+  URL = "url",
+}

app/client/src/widgets/CurrencyInputWidget/component/index.tsx

@@ -48,7 +48,7 @@ class CurrencyInputComponent extends React.Component<CurrencyInputComponentProps
         errorMessage={this.props.errorMessage}
         fill={this.props.fill}
         iconAlign={this.props.iconAlign}
-        iconName={this.props.iconName}
+        iconName={this.props.iconName}   
         inputHTMLType="NUMBER"
         inputType={InputTypes.CURRENCY}
         intent={this.props.intent}
@@ -102,3 +102,5 @@ export interface CurrencyInputComponentProps extends BaseInputComponentProps {
 }
 
 export default CurrencyInputComponent;
+
+expect(getInputMode()).toBeUndefined();