fix: update string input value in real-time

[dinakars777]

Summary

Previously, string inputs in Leva only committed changes to the store when the input lost focus (on blur). This meant that useEffect hooks depending on the value would only fire after clicking away from the input.

This fix makes onUpdate fire on every keystroke, so the store value updates in real-time.

Changes

• Modified ValueInput.tsx to call both onChange and onUpdate on every onChange event
• This affects both text inputs and textareas

Testing

Build passes successfully. The change maintains backward compatibility - onUpdate was already being called on blur, and now it's also called on every keystroke.

Fixes #599

Summary by CodeRabbit

Release Notes

• Bug Fixes
  • Fixed value input callback handling so that updates for non-numeric inputs now consistently trigger both the immediate change callback and the update callback. This ensures external listeners receive updates reliably when values are modified via the input.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 5b335d2

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
leva	Ready	Preview, Comment	Mar 16, 2026 8:37pm

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 5b335d2:

Sandbox	Source
leva-minimal	Configuration
leva-busy	Configuration
leva-scroll	Configuration
leva-advanced-panels	Configuration
leva-ui	Configuration
leva-theme	Configuration
leva-transient	Configuration
leva-plugin-plot	Configuration
leva-plugin-bezier	Configuration
leva-plugin-spring	Configuration
leva-plugin-dates	Configuration
leva-custom-plugin	Configuration

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 2b983687-9dd1-4a55-98af-ac661c9ef69f

📥 Commits

Reviewing files that changed from the base of the PR and between 8470ecd and 5b335d2.

📒 Files selected for processing (1)

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

🚧 Files skipped from review as they are similar to previous changes (1)

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

---

📝 Walkthrough

Walkthrough

The ValueInput onChange handler now calls onChange(value) and — for non-'number' types — also calls onUpdate(value) on every input change, ensuring the updater is invoked during typing rather than only on blur or Enter.

Changes

Cohort / File(s)	Summary
ValueInput onChange Handler packages/leva/src/components/ValueInput/ValueInput.tsx	Wrapped the onChange callback so that on every input change it invokes onChange(value) and, when type !== 'number', additionally invokes onUpdate(value). Blur/Enter and existing update paths remain unchanged.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰 Tap-tap on keys, I nibble and write,
No need to wait for the blur of the light.
I whisper each letter as soon as it's made,
A hopping update — no pause in the trade! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the main change: enabling real-time updates for string input values, which directly addresses the primary objective of fixing delayed propagation of string input changes.
Linked Issues check	✅ Passed	The code change directly addresses issue #599 by calling onUpdate on every onChange event for text inputs, enabling real-time store updates and immediate notification to consumers like useEffect hooks.
Out of Scope Changes check	✅ Passed	All changes are scoped to ValueInput.tsx and directly related to fixing real-time updates for string inputs; no unrelated or out-of-scope modifications are present.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

📝 Coding Plan

• Generate coding plan for human review comments

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Tip

CodeRabbit can generate a title for your PR based on the changes with custom instructions.

Set the reviews.auto_title_instructions setting to generate a title for your PR based on the changes in the PR with custom instructions.

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/leva/src/components/ValueInput/ValueInput.tsx`:
- Around line 87-90: The current onChange handler in ValueInput unconditionally
calls onUpdate(value) on every keystroke which causes NumberInput (which reuses
ValueInput) to also commit on each keystroke; change the handler in ValueInput
so it only calls onUpdate for string inputs (e.g., check props.inputType !==
'number' or typeof value === 'string') and leave numeric inputs to retain their
original commit semantics; update the onChange={(value) => { onChange(value); if
(<guard-for-non-number-or-string>) onUpdate(value); }} logic so NumberInput
behavior is unchanged while string realtime updates remain.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 148ee752-814f-4729-b100-0ebea143c9bd

📥 Commits

Reviewing files that changed from the base of the PR and between 402a1e9 and 8470ecd.

📒 Files selected for processing (1)

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