PinInput onComplete handler is called repeatedly

[mawallace]

Dependencies check up

• I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

7.5.2

What package has an issue?

@mantine/core

What framework do you use?

Remix

In which browsers you can reproduce the issue?

Safari

Describe the bug

The onComplete handler for PinInput is called repeatedly when the handler changes some state.

For example, the following calls onComplete repeatedly, causing the counter to increase uncontrollably.

function Demo() {
  const [counter, setCounter] = useState(0);

  function handleComplete() {
    console.log('complete');
    setCounter(counter + 1);
  }

  return (
    <MantineProvider>
      <PinInput onComplete={handleComplete} />
      <Text>{counter}</Text>
    </MantineProvider>
  );
}

I would expect for the onComplete handler to only be called

1. When the input changes, if the value is complete
2. [Optionally] When the component initially loads, if the value is complete

Note that changing state seems necessary to reproduce this, and the following does not call onComplete repeatedly.

function Demo() {
  function handleComplete() {
    console.log('complete');
  }

  return (
    <MantineProvider>
      <PinInput onComplete={handleComplete} />
    </MantineProvider>
  );
}

For context, in my use case, when the input is complete, I want to proceed with my authentication flow, and as a part of that I set some loading state to true (to trigger some visual feedback). My onComplete handler runs many times, causing issues with the auth flow.

I am currently working around this using a solution like the following, but ideally the onComplete behavior would match:

function Demo() {
  const length = 4;
  const [counter, setCounter] = useState(0);

  function handleChange(value: string) {
    if (value.length === length) {
      console.log('complete');
      setCounter(counter + 1);
    }
  }

  return (
    <MantineProvider>
      <PinInput length={length} onChange={(value) => handleChange(value)} />
      <Text>{counter}</Text>
    </MantineProvider>
  );
}

If possible, include a link to a codesandbox with a minimal reproduction

No response

Possible fix

No response

Self-service

• I would be willing to implement a fix for this issue

[rtivital]

Fixed in 7.5.3

[mawallace]

Just verified that the new release works for my use case. Thanks for the quick response/fix!