diff --git a/.changeset/plenty-spies-provide.md b/.changeset/plenty-spies-provide.md
new file mode 100644
index 00000000..0b63c906
--- /dev/null
+++ b/.changeset/plenty-spies-provide.md
@@ -0,0 +1,5 @@
+---
+"leva": patch
+---
+
+fix: update string input value in real-time
diff --git a/packages/leva/src/components/ValueInput/ValueInput.tsx b/packages/leva/src/components/ValueInput/ValueInput.tsx
index 4bbcd5c0..867545e6 100644
--- a/packages/leva/src/components/ValueInput/ValueInput.tsx
+++ b/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}
diff --git a/packages/leva/src/plugins/String/String.tsx b/packages/leva/src/plugins/String/String.tsx
index f0789923..3f5104ba 100644
--- a/packages/leva/src/plugins/String/String.tsx
+++ b/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
+ if (editable) return
return {displayValue}
}