Skip to content

Commit

Permalink
address comments
Browse files Browse the repository at this point in the history
  • Loading branch information
mmalerba committed Aug 8, 2017
1 parent b16ef28 commit 48b3cc9
Show file tree
Hide file tree
Showing 5 changed files with 24 additions and 20 deletions.
24 changes: 11 additions & 13 deletions src/lib/autocomplete/autocomplete-trigger.ts
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,6 @@ import {MdOptionSelectionChange, MdOption} from '../core/option/option';
import {ENTER, UP_ARROW, DOWN_ARROW, ESCAPE} from '../core/keyboard/keycodes';
import {Directionality} from '../core/bidi/index';
import {MdFormField} from '../form-field/index';
import {MdInput} from '../input/input';
import {Subscription} from 'rxjs/Subscription';
import {merge} from 'rxjs/observable/merge';
import {fromEvent} from 'rxjs/observable/fromEvent';
Expand Down Expand Up @@ -154,7 +153,7 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
private _changeDetectorRef: ChangeDetectorRef,
@Inject(MD_AUTOCOMPLETE_SCROLL_STRATEGY) private _scrollStrategy,
@Optional() private _dir: Directionality,
@Optional() @Host() private _inputContainer: MdFormField,
@Optional() @Host() private _formField: MdFormField,
@Optional() @Inject(DOCUMENT) private _document: any) {}

ngOnDestroy() {
Expand Down Expand Up @@ -247,8 +246,8 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
fromEvent(this._document, 'touchend')
)).call(filter, (event: MouseEvent | TouchEvent) => {
const clickTarget = event.target as HTMLElement;
const inputContainer = this._inputContainer ?
this._inputContainer._elementRef.nativeElement : null;
const inputContainer = this._formField ?
this._formField._elementRef.nativeElement : null;

return this._panelOpen &&
clickTarget !== this._element.nativeElement &&
Expand Down Expand Up @@ -330,16 +329,16 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
* This method manually floats the placeholder until the panel can be closed.
*/
private _floatPlaceholder(): void {
if (this._inputContainer && this._inputContainer.floatPlaceholder === 'auto') {
this._inputContainer.floatPlaceholder = 'always';
if (this._formField && this._formField.floatPlaceholder === 'auto') {
this._formField.floatPlaceholder = 'always';
this._manuallyFloatingPlaceholder = true;
}
}

/** If the placeholder has been manually elevated, return it to its normal state. */
private _resetPlaceholder(): void {
if (this._manuallyFloatingPlaceholder) {
this._inputContainer.floatPlaceholder = 'auto';
this._formField.floatPlaceholder = 'auto';
this._manuallyFloatingPlaceholder = false;
}
}
Expand Down Expand Up @@ -409,11 +408,10 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
// The display value can also be the number zero and shouldn't fall back to an empty string.
const inputValue = toDisplay != null ? toDisplay : '';

// If it's used in a Material container, we should set it through
// the property so it can go through the change detection.
if (this._inputContainer &&
this._inputContainer._control instanceof MdInput) {
this._inputContainer._control.value = inputValue;
// If it's used within a `MdFormField`, we should set it through the property so it can go
// through change detection.
if (this._formField) {
this._formField._control.value = inputValue;
} else {
this._element.nativeElement.value = inputValue;
}
Expand Down Expand Up @@ -471,7 +469,7 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
}

private _getConnectedElement(): ElementRef {
return this._inputContainer ? this._inputContainer._connectionContainerRef : this._element;
return this._formField ? this._formField._connectionContainerRef : this._element;
}

/** Returns the width of the input element, so the panel width can match it. */
Expand Down
8 changes: 6 additions & 2 deletions src/lib/form-field/form-field.ts
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,8 @@ export class MdPlaceholder {}
'class': 'mat-hint',
'[class.mat-right]': 'align == "end"',
'[attr.id]': 'id',
// Remove align attribute to prevent it from interfering with layout.
'[attr.align]': 'null',
}
})
export class MdHint {
Expand Down Expand Up @@ -107,6 +109,9 @@ export abstract class MdFormFieldControl {
*/
stateChanges: Observable<void>;

/** The value of the control. */
value: any;

/** Gets the element ID for this control. */
abstract getId(): string;

Expand Down Expand Up @@ -142,6 +147,7 @@ export abstract class MdFormFieldControl {
/** Container for form controls that applies Material Design styling and behavior. */
@Component({
moduleId: module.id,
// TODO(mmalerba): the input-container selectors and classes are deprecated and will be removed.
selector: 'md-input-container, mat-input-container, md-form-field, mat-form-field',
templateUrl: 'form-field.html',
// MdInput is a directive and can't have styles, so we need to include its styles here.
Expand All @@ -158,8 +164,6 @@ export abstract class MdFormFieldControl {
]),
],
host: {
// Remove align attribute to prevent it from interfering with layout.
'[attr.align]': 'null',
'class': 'mat-input-container mat-form-field',
'[class.mat-input-invalid]': '_control.isErrorState()',
'[class.mat-form-field-invalid]': '_control.isErrorState()',
Expand Down
5 changes: 2 additions & 3 deletions src/lib/input/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,8 @@ import {MdFormFieldModule} from '../form-field/index';
PlatformModule,
],
exports: [
// TODO(mmalerba): We import and re-export the form field module since all existing users of
// `MdInput` will need this to continue using `md-input-container`. We may want to keep this
// long term since the `MdInput` directive will almost always be used with `md-form-field`.
// We re-export the `MdFormFieldModule` since `MdInput` will almost always be used together with
// `MdFormField`.
MdFormFieldModule,
MdInput,
MdTextareaAutosize,
Expand Down
4 changes: 2 additions & 2 deletions src/lib/input/input.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -502,8 +502,8 @@ describe('MdInputContainer without forms', function () {

fixture.detectChanges();

let hintLabel = fixture.debugElement.query(By.css('.mat-hint')).nativeElement;
let endLabel = fixture.debugElement.query(By.css('.mat-hint[align="end"]')).nativeElement;
let hintLabel = fixture.debugElement.query(By.css('.mat-hint:not(.mat-right)')).nativeElement;
let endLabel = fixture.debugElement.query(By.css('.mat-hint.mat-right')).nativeElement;
let input = fixture.debugElement.query(By.css('input')).nativeElement;
let ariaValue = input.getAttribute('aria-describedby');

Expand Down
3 changes: 3 additions & 0 deletions src/lib/public_api.ts
Original file line number Diff line number Diff line change
Expand Up @@ -46,3 +46,6 @@ export * from './tabs/index';
export * from './tabs/tab-nav-bar/index';
export * from './toolbar/index';
export * from './tooltip/index';

// TODO(mmalerba): Temporary alias to avoid breakages, cleanup later.
export {MdFormField as MdInputContainer} from './form-field/index';

0 comments on commit 48b3cc9

Please sign in to comment.