Fix Counter input preventing number entry with step > 1

[Copilot]

Description

The Counter component's onChange handler immediately validated and rounded input values. With step > 1, typing "2000" in increments of 1000 would reset to 0 on each keystroke since Math.round(2/1000) * 1000 = 0.

Changes

• Added local inputValue state to track raw input during typing
• Added isFocused state to defer validation while user is actively typing
• Moved validation/rounding logic from onChange to onBlur via validateAndSetCount()
• Added useEffect to sync inputValue when count changes externally (increment/decrement buttons)

Before/After

Before:

onChange={(e) => {
  const inputValue = parseInt(e.target.value, 10);
  const validValue = Math.max(inputValue, minCount);
  const roundedValue = Math.round(validValue / step) * step; // Rounds immediately
  setCount(Math.max(roundedValue, minCount));
}}

After:

onChange={(e) => {
  setInputValue(e.target.value); // Store raw input
}}
onBlur={() => {
  setIsFocused(false);
  validateAndSetCount(inputValue); // Validate only when done typing
}}

Result

Users can now type arbitrary values. Validation occurs on blur, allowing intermediate values like "2", "20", "200" before reaching "2000".

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Can't type numbers in the pricing calculator's "Video renders" field</issue_title>
<issue_description># Bug Report 🐛
I was trying to update the video renders count on the pricing page but the input field won't accept my typing. It keeps resetting to 0 as I type, which is unusual.

Steps to reproduce:

Go to https://www.remotion.dev pricing section
Try to type "2000" in the "Video renders" input field
Watch as it stays at 0 instead of showing what you're typing

Screen.Recording.2025-11-16.at.11.25.43.PM.mov

What's happening:

Type "2" → shows 0
Type "20" → still shows 0
Type "200" → still shows 0
Can't type the number I need

I have to click the up arrow button repeatedly which takes forever for large values like 100000.

Suggested fix:

Move the rounding/validation to onBlur instead of onChange so users can finish typing before the value gets validated. This would make the input actually usable for keyboard entry.

In Counter.tsx line 78-94, the input keeps resetting to 0, making it impossible to type the desired value. The fix would be to move this rounding logic to an onBlur handler instead of onChange.</issue_description>

<agent_instructions>The component is located in packages/design/src/Counter.tsx</agent_instructions>

Comments on the Issue (you are @copilot in this section)

• Fixes Can't type numbers in the pricing calculator's "Video renders" field #5956

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[vercel]

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

Project	Deployment	Preview	Comments	Updated (UTC)
bugs	Canceled			Nov 18, 2025 9:24am
remotion	Ready	Preview	Comment	Nov 18, 2025 9:24am