[NumberField] Bug with increment/decrement buttons for percent unit

[KasiaSmolarska]

Description: I am using NumberField from version 1.0.0-alpha.7 and encountered an issue with the increment/decrement buttons and input value behavior when the format is set to { style: "percent" } or { style: "unit", unit: "percent" }.

Current Behavior:

When I set format={{ style: "percent" }}, the increment and decrement buttons work correctly if I set step={0.01}. However, when typing a value directly into the input field, it is automatically multiplied by 100. For example, typing 50 results in 5000%, but I expect it to be 50% without multiplication.

When I set format={{ style: "unit", unit: "percent" }}, the input field works fine (typing 50 results in 50% as expected). However, the increment and decrement buttons do not work properly. They do not respond as expected when trying to increment or decrement the value by 1.

For other unit types like format={{ style: "unit", unit: "liter" }}, both the buttons and the input field behave as expected. The increment/decrement buttons work correctly, and typing values works without any unwanted multiplication.

Expected Behavior:

When style: "unit", unit: "percent" is used, the increment and decrement buttons should work correctly, allowing changes by increments of 1.

Steps to Reproduce:

Set the NumberField component with format={{ style: "percent" }}.

Try using the increment/decrement buttons (they work correctly).

Manually type a value like 50 into the input field and observe that it gets multiplied by 100, resulting in 5000%.

Set the NumberField component with format={{ style: "unit", unit: "percent" }}.

Observe that the input works correctly (typing 50 results in 50%), but the increment and decrement buttons do not work as expected.

Set the NumberField component with other unit types, like format={{ style: "unit", unit: "liter" }}, and observe that everything works as expected.

Link to Sandbox Example: Example on CodeSandbox

Browser Information:

Browser: Chrome

Operating System:

OS: Windows

Please let me know if you need any further details!

[atomiks]

The percentage works with values from 0 to 1, so 0.1 = 10%, 0.5 = 50%, etc.

To solve this, we should probably do this:

1. If {style: "percent"}, then typing 40 should map to 0.4 instead of 40x100%; they'd still be required to set step={0.01}
2. If {style: "unit", unit: "percent"}, the step behavior should just work as expected

[KasiaSmolarska]

Thanks for your response.

However, I want to highlight again the main issue I reported:
When using format={{ style: "unit", unit: "percent" }}, the increment and decrement buttons do not work at all.

This is actually the main reason I opened the issue — the input value itself works fine in this mode (typing 50 results in 50%, as expected), but the step buttons don’t respond.

Just to clarify:

• style: "percent" → input multiplies by 100 (currently undesirable, but buttons work if step={0.01})
  - style: "unit", unit: "percent" → input works great, but increment/decrement buttons are broken
• style: "unit", unit: "liter" (and others) → both input and buttons work correctly

Let me know if I can help reproduce this in more detail — I also included a CodeSandbox in the original report.

[atomiks]

#1676 fixes both configs

[KasiaSmolarska]

Thanks a lot!