Highlight React Material UI TextField "Cell" inside of a React Material UI Table?

Issue

I'm using React Material UI with TypeScript and I have a Material UI Table with a column of Material TextFields in each row of that column. Now when the user inputs text into the TextField...I want to "highlight" the entire table cell that the TextField is in, not just autofocus on the textfield. How would I accomplish that? Looks something like this:

Solution

You could do something like this, where you just manipulate the DOM directly by toggling classes.

https://codesandbox.io/s/select-table-cell-on-focus-cvime

export default function App() {
  const handleFocus = (e: React.FocusEvent) => {
    document
      .querySelectorAll("td")
      .forEach((item) => item.classList.remove("focused"));
    e?.currentTarget?.closest("td").classList.add("focused");
  };
  return (
    <div className="App">
      <Table>
        <TableBody>
          <TableRow>
            <TableCell>
              <TextField variant="outlined" onFocus={handleFocus} />
            </TableCell>
            <TableCell>
              <TextField variant="outlined" onFocus={handleFocus} />
            </TableCell>
            <TableCell>
              <TextField variant="outlined" onFocus={handleFocus} />
            </TableCell>
          </TableRow>
        </TableBody>
      </Table>
    </div>
  );
}

Answered By - Barryman9000