TextField label is messed up when component is controlled and value is set by other event trigger

[zivl]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example:
https://9hyhks.csb.app/
https://codesandbox.io/s/cocky-yalow-9hyhks?file=/Demo.tsx

Steps:
When you click the "Click Me" button - you'll see the value is set while the label is still inside the input box and not going up as usual:

import * as React from "react";
import Box from "@mui/material/Box";
import TextField from "@mui/material/TextField";
import Button from "@mui/material/Button";

export default function BasicTextFields() {
  const [value, setValue] = React.useState<string | null>(null);
  return (
    <Box>
      <Button onClick={() => setValue("sssss")}>Click Me</Button>
      <TextField
        label="test"
        value={value}
        onClick={(e) => setValue(e.target.value as string)}
      />
    </Box>
  );
}

Current behavior 😯

When you click the "Click Me" button - you'll see the value is set while the label is still inside the input box and not going up as usual

Expected behavior 🤔

When you click the "Click Me" button - the label should go up to the input box's border

Context 🔦

No response

Your environment 🌎

"@emotion/react": "latest",
"@emotion/styled": "latest",
"@mui/material": "latest",
"@types/react": "latest",
"@types/react-dom": "latest",
"react": "latest",
"react-dom": "latest",
"typescript": "latest"

[sai6855]

@zivl component should not be changed from uncontrolled to controlled within same render cycle. To make issue you described to fix, change Textfield to controlled component by setting initial value of value to empty string.

csb: https://codesandbox.io/s/billowing-fog-pzlwln?file=/Demo.tsx

Full working code:

import * as React from "react";
import Box from "@mui/material/Box";
import TextField from "@mui/material/TextField";
import Button from "@mui/material/Button";

export default function BasicTextFields() {
  const [value, setValue] = React.useState("");
  return (
    <Box>
      <Button onClick={() => setValue("sssss")}>Click Me</Button>
      <TextField
        label="test"
        value={value}
        onClick={(e) => setValue(e.target.value as string)}
      />
    </Box>
  );
}

[zivl]

oh.... wow! thanks, i thought passing null value should act the same as empty string ''
thanks for the clarification