Last PinInput placeholder not being set after clearing the value

[NimmLor]

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.6.1

What package has an issue?

@mantine/core

What framework do you use?

Vite

In which browsers you can reproduce the issue?

Chrome

Describe the bug

After setting the value of a PinInput back to an empty string. The placeholder of the last element is no longer populated.

20240227_102606.mp4

const Sample = () => {
  const [value, setValue] = useState('')
  const [errorMessage, setErrorMessage] = useState('')
  const [isLoading, setIsLoading] = useState(false)

  const login = useCallback(async (code: string) => {
    /* ... */
    await sleep(500)
    /* ... */

    throw new Error(`CodeMismatchException: ${code} is not valid`)
  }, [])

  const handleChange = useCallback(
    async (newValue: string) => {
      setValue(newValue)

      if (newValue.length !== 4) {
        return
      }

      setIsLoading(true)

      await login(newValue)
        .then(() => {
          setErrorMessage('')
        })
        .catch((error) => {
          setValue('')
          if (error instanceof Error) {
            setErrorMessage(error.message)
          }
        })

      setIsLoading(false)
    },
    [login]
  )

  return (
    <>
      <PinInput disabled={isLoading} onChange={handleChange} value={value} />
      <div className='text-red-500'>{errorMessage}</div>
      <pre>{JSON.stringify({ value }, null, 2)}</pre>
    </>
  )
}

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

[d-ilievski]

I've managed to reproduce the issue on my side. While trying to understand what might be the problem I was playing around with the condition checking if newValue.length !== 4. I found out that if I change the number to something lower e.g. 1, it's the next input field not getting the placeholder, in this case, the second.
In your case with 4, the focus stays on the fourth and last because there's no next to be focused on when you reset the value.

In the PinInput implementation, I've noticed that there is no feature implemented that resets the focus on clearing the PinInput. Unless there's a way to reset the value properly that I know of or this behavior is intended, I'd like to work on this issue and come up with a solution.

[rtivital]

Fixed in 7.1.1