diff --git a/apps/builder/src/features/blocks/inputs/textInput/components/TextInputSettings.tsx b/apps/builder/src/features/blocks/inputs/textInput/components/TextInputSettings.tsx index 3bffc32bc..6464d8937 100644 --- a/apps/builder/src/features/blocks/inputs/textInput/components/TextInputSettings.tsx +++ b/apps/builder/src/features/blocks/inputs/textInput/components/TextInputSettings.tsx @@ -1,6 +1,7 @@ import { DropdownList } from "@/components/DropdownList"; import { SwitchWithRelatedSettings } from "@/components/SwitchWithRelatedSettings"; import { TextInput } from "@/components/inputs"; +import { Select } from "@/components/inputs/Select"; import { SwitchWithLabel } from "@/components/inputs/SwitchWithLabel"; import { VariableSearchInput } from "@/components/inputs/VariableSearchInput"; import { FormLabel, Stack } from "@chakra-ui/react"; @@ -8,6 +9,7 @@ import { useTranslate } from "@tolgee/react"; import { fileVisibilityOptions } from "@typebot.io/blocks-inputs/file/constants"; import { defaultTextInputOptions } from "@typebot.io/blocks-inputs/text/constants"; import type { TextInputBlock } from "@typebot.io/blocks-inputs/text/schema"; +import { inputModeOptions } from "@typebot.io/blocks-inputs/text/schema"; import type { Variable } from "@typebot.io/variables/schemas"; import React from "react"; @@ -73,6 +75,12 @@ export const TextInputSettings = ({ options, onOptionsChange }: Props) => { audioClip: { ...options?.audioClip, visibility }, }); + const updateInputMode = (inputMode?: string) => + onOptionsChange({ + ...options, + inputMode: inputMode as (typeof inputModeOptions)[number] | undefined, + }); + return ( { } onChange={updateButtonLabel} /> + + + Input mode + + local.onInput(e.currentTarget.value)} {...others} /> diff --git a/packages/embeds/js/src/components/inputs/Textarea.tsx b/packages/embeds/js/src/components/inputs/Textarea.tsx index 414122c2b..6221c6973 100644 --- a/packages/embeds/js/src/components/inputs/Textarea.tsx +++ b/packages/embeds/js/src/components/inputs/Textarea.tsx @@ -4,10 +4,11 @@ import { type JSX, splitProps } from "solid-js"; type TextareaProps = { ref: HTMLTextAreaElement | undefined; onInput: (value: string) => void; + inputmode?: string; } & Omit, "onInput">; export const Textarea = (props: TextareaProps) => { - const [local, others] = splitProps(props, ["ref", "onInput"]); + const [local, others] = splitProps(props, ["ref", "onInput", "inputmode"]); const isMobile = guessDeviceIsMobile(); @@ -19,6 +20,7 @@ export const Textarea = (props: TextareaProps) => { data-testid="textarea" required autofocus={!isMobile} + inputmode={local.inputmode} onInput={(e) => local.onInput(e.currentTarget.value)} {...others} /> diff --git a/packages/embeds/js/src/features/blocks/inputs/textInput/components/TextInput.tsx b/packages/embeds/js/src/features/blocks/inputs/textInput/components/TextInput.tsx index 518506567..4f99cbaa9 100644 --- a/packages/embeds/js/src/features/blocks/inputs/textInput/components/TextInput.tsx +++ b/packages/embeds/js/src/features/blocks/inputs/textInput/components/TextInput.tsx @@ -313,6 +313,7 @@ export const TextInput = (props: Props) => { onInput={handleInput} onKeyDown={submitIfCtrlEnter} value={inputValue()} + inputmode={props.block.options?.inputMode} placeholder={ props.block.options?.labels?.placeholder ?? defaultTextInputOptions.labels.placeholder @@ -323,6 +324,7 @@ export const TextInput = (props: Props) => { ref={inputRef as HTMLInputElement} onInput={handleInput} value={inputValue()} + inputmode={props.block.options?.inputMode} placeholder={ props.block.options?.labels?.placeholder ?? defaultTextInputOptions.labels.placeholder