Skip to content

input place holder is hovering input value #2661

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
maciejtreder opened this issue Jan 15, 2017 · 21 comments
Closed

input place holder is hovering input value #2661

maciejtreder opened this issue Jan 15, 2017 · 21 comments

Comments

@maciejtreder
Copy link

Bug

What is the expected behavior?

Placeholder should be deisplayed above input

What is the current behavior?

Placeholder is hovering value:
screen shot 2017-01-15 at 2 56 49 pm

What are the steps to reproduce?

<input md-input placeholder="Count" disabled="true" [value]="getCount(product) | async" />

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

OSX - Safari, Chrome (I did not check other browsers)
angular - 2.4.3
material - 2.0.0-beta.1

Is there anything else we should know?

Workaround:
To workaround this problem, add native value to input.

<input md-input placeholder="Count" disabled="true" value=" "  [value]="getCount(product) | async" />
@oraum
Copy link

oraum commented Jan 16, 2017

I was facing the same problem using a formcontrol on the input. While debugging I found out that the MdInputDirectives value is never changed. Therefore it always appears as empty and the md-empty class is added to the placeholder. So maybe there is a problem with the ControllValueAccessor.
My dirty fix was not adding a native value element but programmatically overwriting the value of the MdInputContainer._mdInputChild

@baszczewski
Copy link

This affects me to with formControl and formControlName. With this bug material controls are unusable with Angular Forms.

@RicardoVaranda
Copy link

RicardoVaranda commented Jan 18, 2017

I've created a simple plunkr to show the issue:

https://plnkr.co/edit/Uz09iLIyYgvgN3M4cSJ1?p=preview

@jelbourn @kara Would one of you guys mind taking a look at this 🙊

@RicardoVaranda
Copy link

Actually it seems like this PR already addresses this issue:

#2455

The PR is merged but it doesn't seem to be released yet.

This can be closed.

@KennethGeris
Copy link

Is there something similar like this for textarea?

@kara
Copy link
Contributor

kara commented Jan 24, 2017

This is fixed in master, so closing. Should be out with our next release.

@kara kara closed this as completed Jan 24, 2017
@imVinayPandya
Copy link

imVinayPandya commented Feb 1, 2017

@kara i am using dynamic form and i am setting value of that form from the code. but it seems that placeholder is not working properly. see this link for screenshot http://awesomescreenshot.com/06d68g233f.

and also i won't be able to set value for select control.

my code is like

// initializing form in constructor
private _initProjectForm() {
    this._projectForm = this._fb.group({
      project_name: ['', Validators.required],
      project_website: ['', Validators.compose([GlobalValidator.urlFormat])],
      support_email: ['', Validators.compose([Validators.required, GlobalValidator.mailFormat])],
      project_category: ['', Validators.required],
      description: ['']
    })
  }

// setting value in ngOninit() after getting value from server.
this._projectForm.patchValue({
          project_name: response.data[0].project_name,
          project_website: response.data[0].project_website,
          support_email: response.data[0].support_email,
          project_category: response.data[0].project_category,
          description: response.data[0].description
        });

@kara
Copy link
Contributor

kara commented Feb 4, 2017

@imVinayPandya What version of Material are you using? We haven't released the fix yet publicly, so unless you are working off of a master build, I wouldn't expect it to be updated. Can you repro your case on plunkr?

@imVinayPandya
Copy link

I am using "@angular/material": "2.0.0-beta.1", my package.json is look like following. i am using teradata covalent angular 2 component which is using material 2 component inside it.

{
  "name": "private-project",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\" --project src/tsconfig.json --type-check && tslint \"e2e/**/*.ts\" --project e2e/tsconfig.json --type-check",
    "test": "ng test",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "2.4.1",
    "@angular/compiler": "2.4.1",
    "@angular/core": "2.4.1",
    "@angular/forms": "2.4.1",
    "@angular/http": "2.4.1",
    "@angular/material": "2.0.0-beta.1",
    "@angular/platform-browser": "2.4.1",
    "@angular/platform-browser-dynamic": "2.4.1",
    "@angular/platform-server": "2.4.1",
    "@angular/router": "3.4.1",
    "@covalent/core": "0.10.2",
    "@covalent/charts": "0.10.2",
    "@covalent/dynamic-forms": "0.10.2",
    "@covalent/highlight": "0.10.2",
    "@covalent/http": "0.10.2",
    "@covalent/markdown": "0.10.2",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "highlight.js": "9.6.0",
    "rxjs": "^5.0.1",
    "showdown": "1.4.2",
    "zone.js": "^0.7.2",
    "@swimlane/ngx-charts": "^3.1.2",
    "moment": "^2.17.1",
    "d3": "^4.4.0",

    "ts-helpers": "^1.1.1"

  },
  "devDependencies": {
    "@angular/compiler-cli": "2.4.1",
    "@types/hammerjs": "2.0.30",
    "@types/jasmine": "2.2.31",
    "@types/node": "6.0.34",
    "@types/selenium-webdriver": "2.53.36",
    "angular-cli": "1.0.0-beta.24",
    "codelyzer": "0.0.26",
    "ember-cli-inject-live-reload": "1.4.0",
    "jasmine-core": "2.4.1",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "2.0.0",
    "karma-cli": "1.0.1",
    "karma-jasmine": "1.0.2",
    "karma-remap-istanbul": "0.2.1",
    "karma-firefox-launcher": "1.0.0",
    "karma-phantomjs-launcher": "1.0.1",
    "node-sass": "3.8.0",
    "phantomjs-prebuilt": "2.1.7",
    "protractor": "4.0.5",
    "sass-loader": "^4.0.2",
    "ts-node": "1.2.1",
    "tslint": "3.14.0",
    "typescript": "2.0.10"
  }
}

i am not doing any fancy thing, i am just patching dynamic form value. i have also tried this._projectForm.setValue({}).

@kara
Copy link
Contributor

kara commented Feb 6, 2017

@imVinayPandya Since you are using our last release, the fix would not be in it. It's only in master. Once we make our next public release, you should be able to upgrade to a version that has the fix.

@imVinayPandya
Copy link

Thank you @kara. and thanks to your angular 2 form videos. I have learned so many things from your videos.

@RicardoVaranda
Copy link

@kara Once again thanks for all the hard work, is there an ETA for the next release?

@victornoel
Copy link

@kara I'm using latest beta and this bug hasn't been fixed apparently… I'm experiencing the same thing as @imVinayPandya

@uredkar
Copy link

uredkar commented May 26, 2017

Here is a picture for the same issue Angular2, and Material2. Latest. The issue happens if the data is populated by code, then once you click on the screen the display looks normal change detection does not help the look of the screen.

capture

@victornoel
Copy link

@uredkar that's exactly what I am experiencing, thanks!

@hardikpatel-1
Copy link

i was also experiencing the same issue.

@dhirenpratap
Copy link

facing same issue in 2.0.0-beta.8

@NqCompiler
Copy link

NqCompiler commented Aug 8, 2017

in my case it worked with
setTimeout(() => { changeDetectorRef.detectChanges(); })
in the constructor
the PR for this issue is already labeled as "merge ready" -> #6141

@mariohmol
Copy link

mariohmol commented Aug 30, 2017

That still an issue in beta10 =(

If i click in the one input in the form.. it fixes all the inputs in that form

... my workaround for now is calling click event for the input

@Alexei000
Copy link

It is still an issue in beta12. One possible workaround with declarative only changed is the following:

<form>
    <mat-form-field>
        <span>{{!i.value ? "" : "&nbsp;"}}</span>
        <input matInput placeholder="Favorite food" #i value="Sushi">
    </mat-form-field>
</form>

The placeholder displays correctly if input has a value before it. However, the nice animation is lost.

@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 7, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests