onValueChange prop of a controlled NumberInput does not set value correctly in testing DOM

[spatial-andrewc]

Description

Since upgrading to @ark-ui/react major version 1 I am noticing that the onValueChange callback incorrectly sets the value of the input element in a jest DOM when using the @tesing-library/react and @testing-library/user-event libs. I have included a devbox that shows how the same test fails when using onValueChange but passes when using onChange.

The expected behaviour is that onValueChange correctly sets the input value.

Link to Reproduction (or Detailed Explanation)

https://codesandbox.io/p/devbox/jolly-wood-gz5djk

Steps to Reproduce

1. Go to devbox
2. Start the task called test
3. Run all test
4. See that one test passes and the other fails

Ark UI Version

1.2.1

Framework

• React
• Solid
• Vue

Browser

No response

Additional Information

No response

[spatial-andrewc]

I've included another regression that occurs in the testing DOM in the provided code sandbox. This was noticed after the same upgrade.

  it("will fail because it accepts text", async () => {
    render(<NumberFieldFailsWithText />);
    const numberInput = screen.getByRole("spinbutton");
    await user.type(numberInput, "~as*jhsqwr*");
    await waitFor(() => expect(numberInput).toHaveValue(""));
  });

Expected the element to have value:

    Received:
      ~as*jhsqwr*

[spatial-andrewc]

And another here

it("will fail because it does not respect constraints", async () => {
    render(<NumberFieldPasses max={1} formatOptions={{ style: "percent" }}/>);
    const numberInput = screen.getByRole("spinbutton");
    await user.type(numberInput, "1000");
    fireEvent.blur(numberInput);
    await waitFor(() => expect(numberInput).toHaveValue("100%"));
  });

    expect(element).toHaveValue(100%)

    Expected the element to have value:
      100%
    Received:
      1000