0

I would like the defaultValue of a TextField to show "Username" upon page render. onFocus, I would like "Username" to disappear so that the user may comfortably type. I tried the following:

function Login() {
  const [usernameDefaultValue, setUsernameDefaultValue] = useState("Username");

  return (    <div>
        <TextField
          required
          id="standard-required"
          label="Required"
          defaultValue={usernameDefaultValue}
          onFocus={() => setUsernameDefaultValue('')}
          variant="standard"
        />

)}

but as it is currently the user must double-click the defaultValue ("Username") in order to clear the field for their actual username.

Michael
  • 89
  • 7
  • 1
    Just a curiosity. Why don't you set usernameDefaultValue to "" or undefined and use a placeholder with the value "Username" such as ? – Magofoco Feb 24 '22 at 01:13
  • I tried that, but if I use "placeholder" it shifts (or omits, i can't remember which) the "required" field – Michael Feb 24 '22 at 01:50
  • You can try this for the label/placeholder issue: https://stackoverflow.com/questions/70624192/how-to-show-both-label-and-placeholder-in-material-ui-textfield/70626286 – Magofoco Feb 24 '22 at 01:51

0 Answers0