I am currently facing an issue with Material UI's date input where the contents are automatically focused when typing characters. This behavior causes all digits in a particular field to be highlighted, making it difficult to edit specific parts of the date without clearing everything. For a visual reference, please refer to the image linked below.
https://i.sstatic.net/TYh4S.png
Upon analyzing the situation, I believe that this behavior is triggered by all digits in the current portion of the date being selected simultaneously.
Despite attempting to resolve this using CSS properties like setting userSelect to 'none' and tabIndex to -1, these solutions did not yield any results. Here is a snippet of the code I have tried:
<TextField
tabindex="-1"
className={`${classes.formInput} ${classes.dateInput}`}
classes={{ root: classes.dateInput}}
value={date}
name="date"
onChange={e => setFormField(e.target.getAttribute('name'), e.target.value)}
type="date"
required
label="Date"
variant="standard" />
Any assistance on resolving this issue would be greatly appreciated. Thank you!