Skip to content
This repository has been archived by the owner on Aug 29, 2023. It is now read-only.

Commit

Permalink
fix(mdInput): fix regression that broke input placeholders on Firefox
Browse files Browse the repository at this point in the history
Change to only hide automatic placeholders on webkit.
This fixes Firefox so that placeholders are visible again.

Fixes #2162.  Fixes #2480.
  • Loading branch information
Splaktar committed Jul 4, 2015
1 parent dc87064 commit c222f89
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 8 deletions.
15 changes: 12 additions & 3 deletions src/components/input/input.scss
Original file line number Diff line number Diff line change
Expand Up @@ -111,11 +111,20 @@ md-input-container {
opacity: 0;
}

&:not( .md-input-has-value ) input:not( :focus ) {
color: inherit;
// Hide Chrome's automatic placeholders that were conflicting with those in angular-material
&:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-ampm-field,
&:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-day-field,
&:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-hour-field,
&:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-millisecond-field,
&:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-minute-field,
&:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-month-field,
&:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-second-field,
&:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-week-field,
&:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-year-field,
&:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-text {
color: transparent;
}


/*
* The .md-input class is added to the input/textarea
*/
Expand Down
9 changes: 4 additions & 5 deletions src/components/input/input.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -88,13 +88,13 @@ describe('md-input-container directive', function() {
expect(el).not.toHaveClass('md-input-has-value');
}));

it('should match label to given input id', inject(function($rootScope) {
it('should match label to given input id', inject(function() {
var el = setup('id="foo"');
expect(el.find('label').attr('for')).toBe('foo');
expect(el.find('input').attr('id')).toBe('foo');
}));

it('should match label to automatic input id', inject(function($rootScope) {
it('should match label to automatic input id', inject(function() {
var el = setup();
expect(el.find('input').attr('id')).toBeTruthy();
expect(el.find('label').attr('for')).toBe(el.find('input').attr('id'));
Expand Down Expand Up @@ -164,7 +164,7 @@ describe('md-input-container directive', function() {
expect(label.textContent).toEqual('some placeholder');
}));

it('should put ignore placeholder when a label element is present', inject(function($rootScope, $compile) {
it('should ignore placeholder when a label element is present', inject(function($rootScope, $compile) {
var el = $compile('<md-input-container><label>Hello</label><input ng-model="foo" placeholder="some placeholder"></md-input-container>')($rootScope);
var placeholder = el[0].querySelector('.md-placeholder');
var label = el.find('label')[0];
Expand All @@ -174,8 +174,7 @@ describe('md-input-container directive', function() {
expect(label.textContent).toEqual('Hello');
}));

it('should expect an aria-label on the input when no label is present', inject(function($rootScope, $compile) {

it('should put an aria-label on the input when no label is present', inject(function($rootScope, $compile) {
var el = $compile('<form name="form">' +
' <md-input-container md-no-float>' +
' <input placeholder="baz" md-maxlength="max" ng-model="foo" name="foo">' +
Expand Down

0 comments on commit c222f89

Please sign in to comment.