diff --git a/packages/checkout/widgets-lib/src/components/FormComponents/SelectInput/SelectInput.tsx b/packages/checkout/widgets-lib/src/components/FormComponents/SelectInput/SelectInput.tsx index 8845651ab1..4286c3efc4 100644 --- a/packages/checkout/widgets-lib/src/components/FormComponents/SelectInput/SelectInput.tsx +++ b/packages/checkout/widgets-lib/src/components/FormComponents/SelectInput/SelectInput.tsx @@ -7,7 +7,7 @@ import { selectStyle, } from './SelectInputStyles'; import { SelectForm } from '../SelectForm/SelectForm'; -import { TextInputForm, TextInputType } from '../TextInputForm/TextInputForm'; +import { InputMode, TextInputForm, TextInputType } from '../TextInputForm/TextInputForm'; import { CoinSelectorOptionProps } from '../../CoinSelector/CoinSelectorOption'; interface SelectInputProps { @@ -20,6 +20,7 @@ interface SelectInputProps { textInputSubtext?: string; textInputErrorMessage?: string; textInputType?: TextInputType; + testInputMode?: InputMode; selectSubtext?: string; selectErrorMessage?: string; coinSelectorHeading: string; @@ -50,6 +51,7 @@ export function SelectInput({ textInputTextAlign, textInputSubtext, textInputErrorMessage, + testInputMode, selectTextAlign, selectSubtext, selectErrorMessage, @@ -96,6 +98,7 @@ export function SelectInput({ onTextInputFocus={onTextInputFocus} maxButtonClick={textInputMaxButtonClick} disabled={textInputDisabled} + inputMode={testInputMode} /> diff --git a/packages/checkout/widgets-lib/src/components/FormComponents/TextInputForm/TextInputForm.tsx b/packages/checkout/widgets-lib/src/components/FormComponents/TextInputForm/TextInputForm.tsx index 67df78fc7d..65bb879cfe 100644 --- a/packages/checkout/widgets-lib/src/components/FormComponents/TextInputForm/TextInputForm.tsx +++ b/packages/checkout/widgets-lib/src/components/FormComponents/TextInputForm/TextInputForm.tsx @@ -10,6 +10,7 @@ interface TextInputFormProps { type?: TextInputType; errorMessage?: string; disabled?: boolean; + inputMode?: InputMode; validator: (value: string) => boolean; onTextInputChange: (value: string) => void; onTextInputBlur?: (value: string) => void; @@ -20,6 +21,8 @@ interface TextInputFormProps { export type TextInputType = 'text' | 'number'; +export type InputMode = 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'; + export function TextInputForm({ testId, value, @@ -35,6 +38,7 @@ export function TextInputForm({ subtext, maxButtonClick, disabled, + inputMode, }: TextInputFormProps) { const handleOnChange = (event: React.ChangeEvent, previousValue: string) => { let inputValue = event.target.value; @@ -84,6 +88,7 @@ export function TextInputForm({ onChange={(event) => handleOnChange(event, value)} sizeVariant="large" value={value} + inputMode={inputMode} validationStatus={errorMessage ? 'error' : 'success'} placeholder={placeholder} onBlur={handleOnBlur} diff --git a/packages/checkout/widgets-lib/src/widgets/bridge/components/BridgeForm.tsx b/packages/checkout/widgets-lib/src/widgets/bridge/components/BridgeForm.tsx index 5610d3fcc5..61181c0e49 100644 --- a/packages/checkout/widgets-lib/src/widgets/bridge/components/BridgeForm.tsx +++ b/packages/checkout/widgets-lib/src/widgets/bridge/components/BridgeForm.tsx @@ -327,6 +327,7 @@ export function BridgeForm(props: BridgeFormProps) { onTextInputChange={(value) => handleBridgeAmountChange(value)} onTextInputEnter={submitBridgeValues} textAlign="right" + inputMode="decimal" errorMessage={t(amountError)} /> diff --git a/packages/checkout/widgets-lib/src/widgets/swap/components/SwapForm.tsx b/packages/checkout/widgets-lib/src/widgets/swap/components/SwapForm.tsx index 4e2a699c0c..38ab4eb5e0 100644 --- a/packages/checkout/widgets-lib/src/widgets/swap/components/SwapForm.tsx +++ b/packages/checkout/widgets-lib/src/widgets/swap/components/SwapForm.tsx @@ -708,6 +708,7 @@ export function SwapForm({ data, theme }: SwapFromProps) { } selectTextAlign="left" textInputType="number" + testInputMode="decimal" textInputValue={fromAmount} textInputPlaceholder={t('views.SWAP.swapForm.from.inputPlaceholder')} textInputSubtext={`${t('views.SWAP.content.fiatPricePrefix')} @@ -764,6 +765,7 @@ export function SwapForm({ data, theme }: SwapFromProps) { options={tokensOptionsTo} selectTextAlign="left" textInputType="number" + testInputMode="decimal" textInputValue={toAmount} textInputPlaceholder={t('views.SWAP.swapForm.to.inputPlaceholder')} textInputTextAlign="right"