[TextField] Bad behavior when user edits box before hydration with SSR

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

I'm using MUI's TextField to make a simple SSR login page with a username and password.

The problem is when the user is working over a slow network connection, so it takes some time for the Javascript to download and hydrate the page. As a result, they can edit the text box before hydration occurs.

In the picture below, the user has typed "bob" for the username prior to hydration. The helper text remains in place and it looks bad:

There is also a second problem: once hydration does complete, the TextField reverts to blank, losing the user's edits, which is not good UX.

Expected behavior 🤔

The TextField should behave in a reasonable way prior to hydration. Reasonable could mean either a) don't allow edits, or b) handle the edits gracefully, with good styling and without losing them upon hydration.

Steps to reproduce 🕹

I am doing my SSR setup with Razzle.js. I made a fork here to showcase this.

1. Clone and build the repro:

git clone git@github.com:thomasjm/razzle.git
cd razzle/examples/with-material-ui
git checkout textfield-ssr
npm install
npm run build # Press Y
cd build
node server.js

2. Open localhost:3000 in Chrome. Open the Chrome DevTools, go to the Network tab, and set the speed to "Slow 3G".
3. Refresh the page. Before the JS finishes downloading, try typing in the text box.

Context 🔦

SSR is a popular technique for achieving fast page loads, and TextField should work gracefully with it.

Your environment 🌎

  System:
    OS: Linux 5.15 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish)
  Binaries:
    Node: 16.15.0 - ~/.nvm/versions/node/v16.15.0/bin/node
    Yarn: 1.22.17 - ~/codedown/frontend/node_modules/.bin/yarn
    npm: 8.5.5 - ~/.nvm/versions/node/v16.15.0/bin/npm
  Browsers:
    Chrome: 104.0.5112.79
    Firefox: 104.0.1
  npmPackages:
    @emotion/react: ^11.8.2 => 11.8.2
    @emotion/styled: ^11.8.1 => 11.8.1
    @mui/base:  5.0.0-alpha.95
    @mui/core-downloads-tracker:  5.10.3
    @mui/icons-material:  5.0.5
    @mui/material: ^5.10.3 => 5.10.3
    @mui/private-theming:  5.10.3
    @mui/styled-engine:  5.10.3
    @mui/styles:  5.5.3
    @mui/system:  5.10.3
    @mui/types:  7.2.0
    @mui/utils:  5.10.3
    @types/react: ^17.0.43 => 17.0.43
    react: ^17.0.1 => 17.0.2
    react-dom: ^17.0.1 => 17.0.2
    typescript: ^4.8.2 => 4.8.2

Start with the linked Razzle repro at examples/with-material-ui and follow its build, server, and Slow 3G reproduction steps. Investigate TextField behavior before and during hydration; done means pre-hydration edits have reasonable styling and are not lost when hydration completes.