Skip to content

Commit

Permalink
fix(select): incorrect menu width when there is no placeholder
Browse files Browse the repository at this point in the history
The select pane's width wasn't being set properly, when it doesn't have a placeholder, because the width usually gets set within the placeholder's setter.

Fixes angular#3244.
  • Loading branch information
crisbeto committed Feb 22, 2017
1 parent e3b2486 commit 2641405
Show file tree
Hide file tree
Showing 2 changed files with 34 additions and 4 deletions.
33 changes: 29 additions & 4 deletions src/lib/select/select.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,8 @@ describe('MdSelect', () => {
FloatPlaceholderSelect,
SelectWithErrorSibling,
ThrowsErrorOnInit,
BasicSelectOnPush
BasicSelectOnPush,
BasicSelectNoPlaceholder
],
providers: [
{provide: OverlayContainer, useFactory: () => {
Expand Down Expand Up @@ -119,13 +120,27 @@ describe('MdSelect', () => {
}));

it('should set the width of the overlay based on the trigger', async(() => {
trigger.style.width = '200px';

fixture.whenStable().then(() => {
trigger.click();
fixture.detectChanges();

const pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
expect(pane.style.minWidth).toBe(trigger.getBoundingClientRect().width + 'px');
});
}));

it('should set the width of the overlay if there is no placeholder', async(() => {
let noPlaceholder = TestBed.createComponent(BasicSelectNoPlaceholder);

noPlaceholder.detectChanges();
trigger = noPlaceholder.debugElement.query(By.css('.mat-select-trigger')).nativeElement;

noPlaceholder.whenStable().then(() => {
trigger.click();
noPlaceholder.detectChanges();

const pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
expect(pane.style.minWidth).toBe('200px');
expect(parseInt(pane.style.minWidth)).toBeGreaterThan(0);
});
}));

Expand Down Expand Up @@ -1588,6 +1603,16 @@ class FloatPlaceholderSelect {
@ViewChild(MdSelect) select: MdSelect;
}

@Component({
selector: 'basic-select-no-placeholder',
template: `
<md-select>
<md-option value="value">There are no other options</md-option>
</md-select>
`
})
class BasicSelectNoPlaceholder { }


/**
* TODO: Move this to core testing utility until Angular has event faking
Expand Down
5 changes: 5 additions & 0 deletions src/lib/select/select.ts
Original file line number Diff line number Diff line change
Expand Up @@ -257,6 +257,11 @@ export class MdSelect implements AfterContentInit, ControlValueAccessor, OnDestr
ngAfterContentInit() {
this._initKeyManager();

// If there is no placeholder, the setter won't fire so we need to trigger it from here.
if (!this._placeholder) {
this._triggerWidth = this._getWidth();
}

this._changeSubscription = this.options.changes.startWith(null).subscribe(() => {
this._resetOptions();

Expand Down

0 comments on commit 2641405

Please sign in to comment.