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.

Sign up for GitHub

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

Jump to bottom

fix(autocomplete): update overlay ref width on menu trigger #3573

Merged
merged 4 commits into from
Mar 14, 2017
Merged

fix(autocomplete): update overlay ref width on menu trigger #3573

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
bdc9e82
fix(autocomplete): update overlay ref width on menu trigger
emoralesb05 Mar 13, 2017
a0fbcf4
chore(autocomplete): add pane width unit test
emoralesb05 Mar 13, 2017
f02eb80
chore(): parse and round width since firefox and edge return a decima…
Mar 13, 2017
2a81c9a
chore(): update comment to make it more understandable
Mar 13, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions src/lib/autocomplete/autocomplete-trigger.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,9 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
openPanel(): void {
if (!this._overlayRef) {
this._createOverlay();
} else {
/** Gets width of host incase this has changed, and updated the Overlay reference */
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This isn't very understandable. Something along the lines of "Update the panel width, in case the host has changed" might be better.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok cool! will change it

this._overlayRef.getState().width = this._getHostWidth();
}

if (!this._overlayRef.hasAttached()) {
Expand Down
29 changes: 28 additions & 1 deletion src/lib/autocomplete/autocomplete.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -938,11 +938,37 @@ describe('MdAutocomplete', () => {
}));

});

it('should have correct width when opened', () => {
const widthFixture = TestBed.createComponent(SimpleAutocomplete);
widthFixture.componentInstance.width = 300;
widthFixture.detectChanges();

widthFixture.componentInstance.trigger.openPanel();
widthFixture.detectChanges();

const overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
// Firefox, edge return a decimal value for width, so we need to parse and round it to verify
expect(Math.ceil(parseFloat(overlayPane.style.width))).toEqual(300);

widthFixture.componentInstance.trigger.closePanel();
widthFixture.detectChanges();

widthFixture.componentInstance.width = 500;
widthFixture.detectChanges();

widthFixture.componentInstance.trigger.openPanel();
widthFixture.detectChanges();

// Firefox, edge return a decimal value for width, so we need to parse and round it to verify
expect(Math.ceil(parseFloat(overlayPane.style.width))).toEqual(500);

});
});

@Component({
template: `
<md-input-container [floatPlaceholder]="placeholder">
<md-input-container [floatPlaceholder]="placeholder" [style.width.px]="width">
<input mdInput placeholder="State" [mdAutocomplete]="auto" [formControl]="stateCtrl">
</md-input-container>

Expand All @@ -958,6 +984,7 @@ class SimpleAutocomplete implements OnDestroy {
filteredStates: any[];
valueSub: Subscription;
placeholder = 'auto';
width: number;

@ViewChild(MdAutocompleteTrigger) trigger: MdAutocompleteTrigger;
@ViewChild(MdAutocomplete) panel: MdAutocomplete;
Expand Down