fix: update string input value in real-time

.changeset/plenty-spies-provide.md

@@ -0,0 +1,5 @@
+---
+"leva": patch
+---
+
+fix: update string input value in real-time

packages/leva/src/components/ValueInput/ValueInput.tsx

@@ -13,6 +13,7 @@ export type ValueInputProps = {
   onChange: (value: string) => void
   onKeyDown?: (event: React.KeyboardEvent) => void
   rows?: number
+  liveUpdate?: boolean
 }
 
 export function ValueInput({
@@ -25,6 +26,7 @@ export function ValueInput({
   id,
   inputType = 'text',
   rows = 0,
+  liveUpdate = false,
   ...props
 }: ValueInputProps) {
   const { id: _id, emitOnEditStart, emitOnEditEnd, disabled } = useInputContext()
@@ -84,7 +86,10 @@ export function ValueInput({
         autoComplete="off"
         spellCheck="false"
         value={value}
-        onChange={update(onChange)}
+        onChange={update((value) => {
+          onChange(value)
+          if (type !== "number" || liveUpdate) onUpdate(value)
+        })}
         onFocus={() => emitOnEditStart()}
         onKeyPress={onKeyPress}
         onKeyDown={onKeyDown}

packages/leva/src/plugins/String/String.tsx

@@ -13,7 +13,7 @@ const NonEditableString = styled('div', {
 })
 
 export function String({ displayValue, onUpdate, onChange, editable = true, ...props }: BaseStringProps) {
-  if (editable) return <ValueInput value={displayValue} onUpdate={onUpdate} onChange={onChange} {...props} />
+  if (editable) return <ValueInput value={displayValue} onUpdate={onUpdate} onChange={onChange} liveUpdate {...props} />
   return <NonEditableString>{displayValue}</NonEditableString>
 }