0
417
ViewsMUI TextField component with focus and active cursor
I'm using the MUI TextField component as a single input form. When the component loads it has focus, but no cursor to begin typing. The user still has to click into the input to bring up the cursor and begin typing. Alternatively, the user can click the tab key and the cursor come up. But typing anything else doesn't activate the cursor or register any characters in the TextField. I tried using the autoFocus attribute, as well as: inputRef={input => input && input.focus()} from this answer.
Here is the form:
<FormControl variant="standard" fullWidth>
<TextField
id="new-comment"
label="Comment"
multiline
minRows={3}
maxRows={5}
focused={true}
value={comment}
onChange={updateCommentValue}
onKeyDown={keyPress}
/>
<Button onClick={saveComment}>
Comment
</Button>
</FormControl>
And here is a picture of focus with no cursor:
And a picture of focus with the cursor after clicking in:
·
Juan Pablo Isaza
1 answers
Answer question0
You can do it this way:
function MyComponent () {
const inputRef = useRef(null);
useEffect(() => {
inputRef.current.focus()
}, [])
return (
<TextField inputRef={inputRef} id="new-comment" label="Comment" />
);
}
·
Juan Pablo Isaza
Report
Answer question