CODEWITHSUNDEEP
javascriptreactjsmaterial-uifocustextfield
Chris
Chris

Reputation: 191

MUI 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: TextField with focus but no cursor

And a picture of focus with the cursor after clicking in: TextField with focus and cursor

Upvotes: 3

Views: 4848

Answers (1)

Heitor Paceli
Heitor Paceli

Reputation: 530

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

Upvotes: 3

Related Questions