I have set the TextField to be readOnly as I don't want the phone keypad to popup when user taps on it, instead I have a custom keypad for input. Everything works fine except there is no blinking cursor which denotes that the field is editable. The webapp is only intended for mobile browsers.
<TextField
error={globalContext.isInputError}
value={globalContext.amount}
multiline={false}
autoFocus
placeholder={Math.abs(globalContext.balanceDue).toString()}
helperText={
<Typography variant="caption" className={classes.input} display="block">
{globalContext.inputHelperText}
</Typography>
}
margin="normal"
InputProps={{
startAdornment: (
<InputAdornment position="start" classes={{ positionStart: classes.centerAdornment }}>
<Typography variant="h6" display="block">
₹
</Typography>
</InputAdornment>
),
readOnly: true,
style: { fontSize: '22px', fontWeight: 'bold' }
}}
className={classes.input}
/>
How do I display the blinking cursor in TextField?
