Skip to content
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

[Input] Placeholder not hidden when formControl value changes with emitEvent: false #8982

Closed
filipows opened this issue Dec 14, 2017 · 3 comments · Fixed by #9260
Closed
Assignees
Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@filipows
Copy link

filipows commented Dec 14, 2017

Bug, feature request, or proposal:

bug

What is the expected behavior?

Placeholder should hide if input value is not empty

What is the current behavior?

Placeholder overlaps the content of input
placeholder-bug

What are the steps to reproduce?

  1. MatFormField: floatPlaceholder="never" or floatLabel="never" (as floatPlaceholder is deprecated)
  2. Patch value of formControl with {emitEvent: false}

https://stackblitz.com/edit/angular-material2-issue-gvg3yu

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

Angular: 5.0
Material: 5.0

Ubuntu 16.04
Chrome Version 61.0.3163.100
Firefox Quantum Version 57

Is there anything else we should know?

It can be related to this issue: #7066

@andrewseguin andrewseguin changed the title Input placeholder (floatPlaceholder="never") doesn't hide when formControl value changes with emitEvent: false [Input] Placeholder not hidden when formControl value changes with emitEvent: false Dec 15, 2017
@andrewseguin andrewseguin added the P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent label Dec 15, 2017
@montella1507
Copy link

Same here.

@crisbeto crisbeto added the has pr label Jan 6, 2018
@crisbeto crisbeto self-assigned this Jan 6, 2018
crisbeto added a commit to crisbeto/material2 that referenced this issue Jan 6, 2018
…ut emitting an event

Fixes the input's floating label state not being updated when the consumer patches the form control's value without emitting an event.

Fixes angular#8982.
jelbourn pushed a commit that referenced this issue Jan 21, 2018
…ut emitting an event

Fixes the input's floating label state not being updated when the consumer patches the form control's value without emitting an event.

Fixes #8982.
jelbourn pushed a commit that referenced this issue Jan 23, 2018
…ut emitting an event (#9260)

Fixes the input's floating label state not being updated when the consumer patches the form control's value without emitting an event.

Fixes #8982.
jelbourn pushed a commit to jelbourn/components that referenced this issue Jan 29, 2018
…ut emitting an event (angular#9260)

Fixes the input's floating label state not being updated when the consumer patches the form control's value without emitting an event.

Fixes angular#8982.
@rafh
Copy link

rafh commented Feb 9, 2018

I ran into a similar issue, and this is the workaround I'm using until I can come up with something better.

checkFormValues(form) {
   Object.keys(form.controls).forEach(key => {
      if(form.get(key).value.length > 0 && form.get(key).valid) {
      form.get(key).markAsTouched();
      form.get(key).markAsDirty();
      form.get(key).updateValueAndValidity();
     }
  });
}

In my global stylesheet, I applied these styles

mat-input-container.ng-valid.ng-touched {
   .mat-input-placeholder.mat-empty.mat-float {
      transform: translateY(-100%) scale(.75);
   }
}

@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 8, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
6 participants