after material 5.0 upgrade (from 5.0rc1) labels don't move on material inputs

[gasparherrera]

Issue type

I'm submitting a (check one):
[X] Regression (something that used to work, but stopped working in a newer version)

Prerequisites

Before posting, make sure you do the following (check all):
[X] Confirm you are using the latest versions of all necessary packages (or if not, explain why not)
[X] Search GitHub for a similar issue or PR
[X] If submitting a Support request, also search [Stack Overflow][stack-overflow] for similar issues
Note: Please cross-post GitHub support requests to [Stack Overflow][stack-overflow], and include a link in your GitHub issue to your Stack Overflow question. We do currently respond to support requests on GitHub, but we eventually expect to stop, and will then refer all support questions exclusively to Stack Overflow.

Current behavior

Usted to work as expected on all material inputs, but now the labels do not push up when receiving input onto them.

Expected behavior

Should go as it always did with the material inputs

IMPORTANT: How can we reproduce your problem?

package.json
{
  "name": "",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular-devkit/schematics": "0.0.40",
    "@angular/animations": "^5.1.0",
    "@angular/cdk": "^5.0.0",
    "@angular/common": "^5.1.0",
    "@angular/compiler": "^5.1.0",
    "@angular/core": "^5.1.0",
    "@angular/forms": "^5.1.0",
    "@angular/http": "^5.1.0",
    "@angular/material": "^5.0.0",
    "@angular/material-moment-adapter": "^5.0.0",
    "@angular/platform-browser": "^5.1.0",
    "@angular/platform-browser-dynamic": "^5.1.0",
    "@angular/router": "^5.1.0",
    "angular2-json-schema-form": "^0.6.0-alpha.7",
    "babel-polyfill": "^6.26.0",
    "core-js": "^2.5.2",
    "hammerjs": "^2.0.8",
    "moment": "^2.19.4",
    "rxjs": "^5.5.5",
    "zone.js": "^0.8.18"
  },
  "devDependencies": {
    "@angular/cli": "1.6.0",
    "@angular/compiler-cli": "^5.1.0",
    "@angular/language-service": "^5.1.0",
    "@types/jasmine": "~2.8.2",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.0.57",
    "codelyzer": "^4.0.2",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.3.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.2.1",
    "ts-node": "~4.0.1",
    "tslint": "~5.8.0",
    "typescript": ">=2.4.2 <2.5.0"
  }
}

any.html
<json-schema-form
            framework="material-design"
            [schema]="mySchema"
            [layout]="layout_espanol"
            [data]="model"
            (onSubmit)="formulario_enviado($event)">

(layout_espanol does nothing except translate "submit" to "enviar")

this.mySchema =  {
        "required": [],
        "properties": {
            "first_name": {
                "type": "string",
                "widget": "text",
                "title": "Nombre(s)",
                "required": false,
                "description": "Nombre o nombres personales"
            },
            "last_name": {
                "type": "string",
                "widget": "text",
                "title": "Apellido(s)",
                "required": false,
                "description": "Apellido o apellidos personales"
            },
            "foto_fondo_perfil": {
                "type": "string",
                "widget": "select",
                "title": "Foto fondo perfil",
                "required": false,
                "description": "imagen de fondo para su sesión en LIMS",
                "oneOf": [
                    {
                        "enum": [
                            "bandurria.jpg"
                        ],
                        "title": "bandurria"
                    },
                    {
                        "enum": [
                            "ballena.jpg"
                        ],
                        "title": "ballena"
                    },
                ],
                "default": "bandurria.jpg"
            }
        }

Environment

OS name & version:
OSX, high sierra

Browser name & version:
Chrome 63.0.3239.84 (Official Build) (64-bit)

Angular version:
5.0.0

Angular JSON Schema Form version(s):
^0.6.0-alpha.7

[gasparherrera]

"fixed" if using this package.json config:

{
  "name": "",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular-devkit/schematics": "0.0.40",
    "@angular/animations": "^5.1.0",
    "@angular/cdk": "5.0.0-rc.2",
    "@angular/common": "^5.1.0",
    "@angular/compiler": "^5.1.0",
    "@angular/core": "^5.1.0",
    "@angular/forms": "^5.1.0",
    "@angular/http": "^5.1.0",
    "@angular/material": "5.0.0-rc.2",
    "@angular/material-moment-adapter": "5.0.0-rc.2",
    "@angular/platform-browser": "^5.1.0",
    "@angular/platform-browser-dynamic": "^5.1.0",
    "@angular/router": "^5.1.0",
    "angular2-json-schema-form": "^0.6.0-alpha.7",
    "babel-polyfill": "^6.26.0",
    "core-js": "^2.5.2",
    "hammerjs": "^2.0.8",
    "moment": "^2.19.4",
    "rxjs": "^5.5.5",
    "zone.js": "^0.8.18"
  },
  "devDependencies": {
    "@angular/cli": "1.6.0",
    "@angular/compiler-cli": "^5.1.0",
    "@angular/language-service": "^5.1.0",
    "@types/jasmine": "~2.8.2",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.0.57",
    "codelyzer": "^4.0.2",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.3.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.2.1",
    "ts-node": "~4.0.1",
    "tslint": "~5.8.0",
    "typescript": ">=2.4.2 <2.5"
  }

[gasparherrera]

this may be related ?:

fix(input): Add pure-CSS floating label logic that will work on...
angular/components#8491

(context: https://github.com/angular/material2/releases under 5.0.0-rc.3 Bug Fixes: input: Add pure-CSS floating label logic that will work on... )

[tmburnell]

I am seeing this also... and have noticed the following:

1. Inside the material component the span that wraps the label does not have all the classes it needs:
   has this: mat-input-placeholder-wrapper mat-form-field-placeholder-wrapper
   should have: mat-form-field-label-wrapper mat-input-placeholder-wrapper mat-form-field-placeholder-wrapper

2. The classes that get added to the input/form container do not update the touched flags (or other classes) which control the animation.
   I ran a test and put a breakpoint on "MatInput.prototype.onContainerClick" which should fire on selection of a input box and it does not trigger. Which explains why the classes dont get applied. But not sure how to figure out why the triggers are not firing.

3. The rest of my app still has animation just not what is inside the schema form.

So, it appears something is restricting the change detection and material does not fully realize that the inputs are being selected.

[Koslun]

@tmburnell

1. ... the label does not have all the classes it needs ...

I'm guessing then that the inputs aren't surrounded by <mat-form-field> tags. Ditching them removes the float effect, instead simply disappearing once text is entered.

2. The classes that get added to the input/form container do not update the touched flags ...

As the placeholder just stays even after inputs are triggered I think this indeed is the underlying issue. Though point 1 might help too.

I haven't really inspected the code properly so I don't either know why this is happening.