'MUI TextField losing focus on keystroke

I'm using a mui TextField to record a number input from the user. However, whenever a single key is pressed, the TextField immediately loses focus and I'm not sure why. Additionally, after using UseRef hook to set focus, I'm also not able to use the incrementer on the side of the TextField (as seen in the image).

Any help would be appreciated!

<TextField 
    inputRef = { durationRef }
    name = "add-class-duration"
    label = "Duration"
    type = "number"
    placeholder = "Hours"
    value = { duration }
    onChange = { (e) => setDuration(e.target.value) }
    onClick = { () => durationRef.current.focus() }
    margin = "dense"
    required
/>

Image of the TextField

reactjsinputmaterial-uifrontendtextfield


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions