MUI TextField component with focus and active cursor

Question

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:

score 2 · Answer 1 · answered Oct 28 '22 at 16:21

Adding autoFocus solves this issue:

<FormControl variant="standard" fullWidth>
  <TextField 
    id="new-comment" 
    label="Comment"
    multiline
    minRows={3}
    maxRows={5}
    focused
    autoFocus
    value={comment} 
    onChange={updateCommentValue}
    onKeyDown={keyPress}
  />
  <Button onClick={saveComment}>
    Comment
  </Button>
</FormControl>

See at StackBlitz

MUI TextField component with focus and active cursor

1 Answers1