🐛 (numberInput) Fix input clearing out on dot or comma press

packages/embeds/js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.2.8",
+  "version": "0.2.9",
   "description": "Javascript library to display typebots on your website",
   "type": "module",
   "main": "dist/index.js",

packages/embeds/js/src/features/blocks/inputs/number/components/NumberInput.tsx

@@ -1,10 +1,10 @@
-import { ShortTextInput } from '@/components'
 import { SendButton } from '@/components/SendButton'
 import { CommandData } from '@/features/commands/types'
 import { InputSubmitContent } from '@/types'
 import { isMobile } from '@/utils/isMobileSignal'
 import type { NumberInputBlock } from '@typebot.io/schemas'
 import { createSignal, onCleanup, onMount } from 'solid-js'
+import { numberInputHelper } from '../numberInputHelper'
 
 type NumberInputProps = {
   block: NumberInputBlock
@@ -13,16 +13,21 @@ type NumberInputProps = {
 }
 
 export const NumberInput = (props: NumberInputProps) => {
-  const [inputValue, setInputValue] = createSignal(props.defaultValue ?? '')
+  const [inputValue, setInputValue] = createSignal<string | number>(
+    props.defaultValue ?? ''
+  )
+  // eslint-disable-next-line solid/reactivity
+  const [staticValue, bindValue, targetValue] = numberInputHelper(() =>
+    inputValue()
+  )
   let inputRef: HTMLInputElement | undefined
 
-  const handleInput = (inputValue: string) => setInputValue(inputValue)
-
   const checkIfInputIsValid = () =>
     inputValue() !== '' && inputRef?.reportValidity()
 
   const submit = () => {
-    if (checkIfInputIsValid()) props.onSubmit({ value: inputValue() })
+    if (checkIfInputIsValid())
+      props.onSubmit({ value: inputValue().toString() })
   }
 
   const submitWhenEnter = (e: KeyboardEvent) => {
@@ -53,15 +58,21 @@ export const NumberInput = (props: NumberInputProps) => {
       }}
       onKeyDown={submitWhenEnter}
     >
-      <ShortTextInput
+      <input
         ref={inputRef}
-        value={inputValue()}
+        class="focus:outline-none bg-transparent px-4 py-4 flex-1 w-full text-input"
+        style={{ 'font-size': '16px', appearance: 'auto' }}
+        value={staticValue}
+        // @ts-expect-error not defined
+        // eslint-disable-next-line solid/jsx-no-undef
+        use:bindValue
         placeholder={
           props.block.options?.labels?.placeholder ?? 'Type your answer...'
         }
-        onInput={handleInput}
+        onInput={(e) => {
+          setInputValue(targetValue(e.currentTarget))
+        }}
         type="number"
-        style={{ appearance: 'auto' }}
         min={props.block.options?.min}
         max={props.block.options?.max}
         step={props.block.options?.step ?? 'any'}

packages/embeds/js/src/features/blocks/inputs/number/numberInputHelper.tsx

@@ -0,0 +1,32 @@
+import { createEffect, untrack } from 'solid-js'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const numberInputHelper = function (value: () => any) {
+  const bindDirective = function (el: HTMLInputElement) {
+    createEffect(function () {
+      const v = value()
+      if (v == null) {
+        el.value = v
+        return
+      }
+
+      const nodeV = el.value
+      if ((v === 0 && nodeV === '') || v != nodeV) {
+        el.value = v + ''
+      }
+    })
+  }
+  const targetValue = function (el: HTMLInputElement) {
+    if (el.validity.badInput) {
+      return value()
+    }
+
+    if (el.value == '') {
+      return undefined
+    }
+
+    return el.valueAsNumber
+  }
+
+  return [untrack(value), bindDirective, targetValue]
+}

packages/embeds/nextjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/nextjs",
-  "version": "0.2.8",
+  "version": "0.2.9",
   "description": "Convenient library to display typebots on your Next.js website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

packages/embeds/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.2.8",
+  "version": "0.2.9",
   "description": "Convenient library to display typebots on your React app",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",