Open gasparherrera opened 6 years ago
"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"
}
this may be related ?:
fix(input): Add pure-CSS floating label logic that will work on... https://github.com/angular/material2/pull/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... )
I am seeing this also... and have noticed the following:
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
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.
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.
@tmburnell
- ... 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.
- 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.
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?
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