Provide a better input experience with Server Side Rendering

[hamedbaatour]

Bug, feature request, or proposal:

proposal

What is the expected behavior?

the input placeholder texts renders at the top of the input when the app is being rendered on the server side to avoid interference with the user input

What is the current behavior?

the placeholder text and user input overlap when only SSR is loaded

What are the steps to reproduce?

server-side rendering with angular universal
add mat-input
throttle the network to simulate a slow 3g connection user experience
type in the SSR version input before the angular app bootstraps

What is the use-case or motivation for changing an existing behavior?

it is a very frustrating to the user to type without being able to clearly see what he typed

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 5, all browsers!

[mmalerba]

It seems to be working for me. Does the pre-rendered version of your app include your theme file? I believe the CSS for floating the label is part of the theme (since it depends on the typography settings)

[hamedbaatour]

@mmalerba yes it is included as my SSR app is using the same config as the non-SSR app and here is my SSR app config in the .angular-cli.json:

    {
      "name": "ssr",
      "platform": "server",
      "root": "src",
      "outDir": "functions/dist",
      "assets": [
        "assets",
        "favicon.ico",
        "manifest.json"
      ],
      "index": "index.html",
      "main": "main.server.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.server.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "../node_modules/normalize.css/normalize.css",
        "./styles.scss",
        "./app/core/material/material.theme.scss"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }

the theme file is included in the styles array and all styles seem to show up normally like buttons accent and primary colors in the SSR app. I believe with a quick glance at the source code I saw that it is using angular animations to move up the placeholder out of the way when the user types. I suggest using pure CSS animations instead to make it work on the server side. hope this helps in identifying the issue but I will try to investigate the issue more and maybe send a PR if I have some time.

[mmalerba]

Ah I think I see what you're talking about. I thought you meant the it would render overlapped if you supplied an initial value and placeholder (e.g. <input matInput value="value" placehodler="placeholder">). It looks like you're actually talking about if you render with no value and the the user goes to type one in before the app has bootstrapped.

In general Angular Universal operates under the assumption that by the time the user interacts the app will have bootstrapped. If anything I think the correct thing to do would be to make the prerendered inputs readonly since anything the user types would be thrown away once the app bootstraps.

[hamedbaatour]

@mmalerba not really it will not be thrown away we use preboot so the user input will not be thrown away once the app bootstraps so I don't think this issue is minor from a user experience perspective as it's very irritating and hard for the user to type with the placeholder overlapping.

I think it is really important for users especially on a slow network to type before the app bootstraps and use the email and password fields as soon as the SSR app shows up. it saves a ton of time for the user but unfortunately now they have just to play the guessing game to understand what they typed until the app bootstraps.

[mmalerba]

I see, I didn't realize the data will be retained. In that case I think we may be able to do something using the :focus and :placeholder-shown styles to make the floating work on the SSR'd page

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}