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} }