You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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
constSample=()=>{const[value,setValue]=useState('')const[errorMessage,setErrorMessage]=useState('')const[isLoading,setIsLoading]=useState(false)constlogin=useCallback(async(code: string)=>{/* ... */awaitsleep(500)/* ... */thrownewError(`CodeMismatchException: ${code} is not valid`)},[])consthandleChange=useCallback(async(newValue: string)=>{setValue(newValue)if(newValue.length!==4){return}setIsLoading(true)awaitlogin(newValue).then(()=>{setErrorMessage('')}).catch((error)=>{setValue('')if(errorinstanceofError){setErrorMessage(error.message)}})setIsLoading(false)},[login])return(<><PinInputdisabled={isLoading}onChange={handleChange}value={value}/><divclassName='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
The text was updated successfully, but these errors were encountered:
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.
Dependencies check up
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
If possible, include a link to a codesandbox with a minimal reproduction
No response
Possible fix
No response
Self-service
The text was updated successfully, but these errors were encountered: