Skip to content

Commit

Permalink
Fixed #7337 - Remove autoWidth from Dropdown
Browse files Browse the repository at this point in the history
  • Loading branch information
@cagataycivici
cagataycivici committed Mar 5, 2019
1 parent e996360 commit ccad045
Show file tree
Hide file tree
Showing 3 changed files with 21 additions and 49 deletions.
1 change: 1 addition & 0 deletions src/app/components/dropdown/dropdown.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
position: relative;
cursor: pointer;
vertical-align: middle;
min-width: 12.5em;
}

.ui-dropdown .ui-dropdown-clear-icon {
Expand Down
47 changes: 12 additions & 35 deletions src/app/components/dropdown/dropdown.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,19 +64,6 @@ export class DropdownItem {
<div #container [ngClass]="{'ui-dropdown ui-widget ui-state-default ui-corner-all ui-helper-clearfix':true,
'ui-state-disabled':disabled, 'ui-dropdown-open':overlayVisible, 'ui-state-focus':focused, 'ui-dropdown-clearable': showClear && !disabled}"
(click)="onMouseclick($event)" [ngStyle]="style" [class]="styleClass">
<div class="ui-helper-hidden-accessible" *ngIf="autoWidth">
<select [attr.id]="selectId" [required]="required" [attr.name]="name" [attr.aria-label]="selectedOption ? selectedOption.label : ' '" tabindex="-1" aria-hidden="true">
<option *ngIf="placeholder">{{placeholder}}</option>
<ng-container *ngIf="group">
<optgroup *ngFor="let option of options" [attr.label]="option.label">
<option *ngFor="let option of option.items" [value]="option.value" [selected]="selectedOption == option">{{option.label}}</option>
</optgroup>
</ng-container>
<ng-container *ngIf="!group">
<option *ngFor="let option of options" [value]="option.value" [selected]="selectedOption == option">{{option.label}}</option>
</ng-container>
</select>
</div>
<div class="ui-helper-hidden-accessible">
<input #in [attr.id]="inputId" type="text" [attr.aria-label]="selectedOption ? selectedOption.label : ' '" readonly (focus)="onInputFocus($event)" aria-haspopup="listbox"
(blur)="onInputBlur($event)" (keydown)="onKeydown($event, true)" [disabled]="disabled" [attr.tabindex]="tabindex" [attr.autofocus]="autofocus">
Expand Down Expand Up @@ -176,9 +163,7 @@ export class Dropdown implements OnInit,AfterViewInit,AfterContentInit,AfterView
@Input() disabled: boolean;

@Input() readonly: boolean;

@Input() autoWidth: boolean = true;


@Input() required: boolean;

@Input() editable: boolean;
Expand Down Expand Up @@ -251,6 +236,16 @@ export class Dropdown implements OnInit,AfterViewInit,AfterContentInit,AfterView

@ContentChildren(PrimeTemplate) templates: QueryList<any>;

private _autoWidth: boolean;

@Input() get autoWidth(): boolean {
return this._autoWidth;
}
set utc(_autoWidth: boolean) {
this._autoWidth = _autoWidth;
console.log("Setting autoWidth has no effect as automatic width calculation is removed for better perfomance.");
}

overlay: HTMLDivElement;

itemsWrapper: HTMLDivElement;
Expand Down Expand Up @@ -362,8 +357,6 @@ export class Dropdown implements OnInit,AfterViewInit,AfterContentInit,AfterView
if (this.editable) {
this.updateEditableLabel();
}

this.updateDimensions();
}

get label(): string {
Expand Down Expand Up @@ -405,24 +398,18 @@ export class Dropdown implements OnInit,AfterViewInit,AfterContentInit,AfterView
}
}

ngAfterViewChecked() {
if (this.autoWidth && !this.dimensionsUpdated) {
this.updateDimensions();
}

ngAfterViewChecked() {
if (this.optionsChanged && this.overlayVisible) {
this.optionsChanged = false;

this.zone.runOutsideAngular(() => {
setTimeout(() => {
this.updateDimensions();
this.alignOverlay();
}, 1);
});
}

if (this.selectedOptionUpdated && this.itemsWrapper) {
this.updateDimensions();
let selectedItem = DomHandler.findSingle(this.overlay, 'li.ui-state-highlight');
if (selectedItem) {
DomHandler.scrollInView(this.itemsWrapper, DomHandler.findSingle(this.overlay, 'li.ui-state-highlight'));
Expand Down Expand Up @@ -472,16 +459,6 @@ export class Dropdown implements OnInit,AfterViewInit,AfterContentInit,AfterView
this.disabled = val;
}

updateDimensions() {
if (this.autoWidth && this.el.nativeElement && this.el.nativeElement.children[0] && this.el.nativeElement.offsetParent) {
let select = DomHandler.findSingle(this.el.nativeElement, 'select');
if (select && !this.style||(this.style && (!this.style['width']&&!this.style['min-width']))) {
this.el.nativeElement.children[0].style.width = select.offsetWidth + 30 + 'px';
}
this.dimensionsUpdated = true;
}
}

onMouseclick(event) {
if (this.disabled||this.readonly) {
return;
Expand Down
22 changes: 8 additions & 14 deletions src/app/showcase/components/dropdown/dropdowndemo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,11 @@ <h3 class="first">Single</h3>
<p>Selected City: {{selectedCity ? selectedCity.name : 'none'}}</p>

<h3>Editable</h3>
<p-dropdown [options]="cars" [(ngModel)]="selectedCar1" [style]="{'width':'150px'}" editable="true" placeholder="Select a Brand"></p-dropdown>
<p-dropdown [options]="cars" [(ngModel)]="selectedCar1" editable="true" placeholder="Select a Brand"></p-dropdown>
<p>Selected Car: {{selectedCar1 || 'none'}}</p>

<h3>Content with Filters</h3>
<p-dropdown [options]="cars" [(ngModel)]="selectedCar2" [style]="{'width':'150px'}" filter="true">
<p-dropdown [options]="cars" [(ngModel)]="selectedCar2" filter="true">
<ng-template let-item pTemplate="selectedItem">
<img src="assets/showcase/images/demo/car/{{item.label}}.png" style="width:16px;vertical-align:middle" />
<span style="vertical-align:middle; margin-left: .5em">{{item.label}}</span>
Expand All @@ -30,7 +30,7 @@ <h3>Content with Filters</h3>
<p>Selected Car: {{selectedCar2 || 'none'}}</p>

<h3>Group</h3>
<p-dropdown [options]="groupedCars" [(ngModel)]="selectedCar3" [style]="{'width':'150px'}" placeholder="Select a Car" [group]="true">
<p-dropdown [options]="groupedCars" [(ngModel)]="selectedCar3" placeholder="Select a Car" [group]="true">
<ng-template let-group pTemplate="group">
<img src="assets/showcase/images/demo/flag/{{group.value}}" style="width:20px;vertical-align:middle" />
<span style="margin-left:.25em">{{group.label}}</span>
Expand All @@ -39,7 +39,7 @@ <h3>Group</h3>
<p>Selected Car: {{selectedCar3 || 'none'}}</p>

<h3>Virtual Scroll (10000 Items)</h3>
<p-dropdown [options]="items" [(ngModel)]="item" placeholder="Select Item" [style]="{'width':'200px'}" [virtualScroll]="true" [itemSize]="31" [filter]="false" [autoWidth]="false"></p-dropdown>
<p-dropdown [options]="items" [(ngModel)]="item" placeholder="Select Item" [virtualScroll]="true" [itemSize]="31" [filter]="false"></p-dropdown>
</div>

<div class="content-section documentation">
Expand Down Expand Up @@ -333,12 +333,6 @@ <h3>Properties</h3>
<td>null</td>
<td>Placeholder text to show when filter input is empty.</td>
</tr>
<tr>
<td>autoWidth</td>
<td>boolean</td>
<td>true</td>
<td>Calculates the width based on options width, set to false for custom width.</td>
</tr>
<tr>
<td>required</td>
<td>boolean</td>
Expand Down Expand Up @@ -637,11 +631,11 @@ <h3>Dependencies</h3>
&lt;p&gt;Selected City: &#123;&#123;selectedCity ? selectedCity.name : 'none'&#125;&#125;&lt;/p&gt;

&lt;h3&gt;Editable&lt;/h3&gt;
&lt;p-dropdown [options]="cars" [(ngModel)]="selectedCar1" [style]="&#123;'width':'150px'&#125;" editable="true" placeholder="Select a Brand"&gt;&lt;/p-dropdown&gt;
&lt;p-dropdown [options]="cars" [(ngModel)]="selectedCar1" editable="true" placeholder="Select a Brand"&gt;&lt;/p-dropdown&gt;
&lt;p&gt;Selected Car: &#123;&#123;selectedCar1 || 'none'&#125;&#125;&lt;/p&gt;

&lt;h3&gt;Content with Filters&lt;/h3&gt;
&lt;p-dropdown [options]="cars" [(ngModel)]="selectedCar2" [style]="&#123;'width':'150px'&#125;" filter="true"&gt;
&lt;p-dropdown [options]="cars" [(ngModel)]="selectedCar2" filter="true"&gt;
&lt;ng-template let-item pTemplate="selectedItem"&gt;
&lt;img src="assets/showcase/images/demo/car/&#123;&#123;item.label&#125;&#125;.png" style="width:16px;vertical-align:middle" /&gt;
&lt;span style="vertical-align:middle; margin-left: .5em"&gt;&#123;&#123;item.label&#125;&#125;&lt;/span&gt;
Expand All @@ -656,7 +650,7 @@ <h3>Dependencies</h3>
&lt;p&gt;Selected Car: &#123;&#123;selectedCar2 || 'none'&#125;&#125;&lt;/p&gt;

&lt;h3&gt;Group&lt;/h3&gt;
&lt;p-dropdown [options]="groupedCars" [(ngModel)]="selectedCar3" [style]="&#123;'width':'150px'&#125;" placeholder="Select a Car" [group]="true"&gt;
&lt;p-dropdown [options]="groupedCars" [(ngModel)]="selectedCar3" placeholder="Select a Car" [group]="true"&gt;
&lt;ng-template let-group pTemplate="group"&gt;
&lt;img src="assets/showcase/images/demo/flag/&#123;&#123;group.value&#125;&#125;" style="width:20px;vertical-align:middle" /&gt;
&lt;span style="margin-left:.25em"&gt;&#123;&#123;group.label&#125;&#125;&lt;/span&gt;
Expand All @@ -665,7 +659,7 @@ <h3>Dependencies</h3>
&lt;p&gt;Selected Car: &#123;&#123;selectedCar3 || 'none'&#125;&#125;&lt;/p&gt;

&lt;h3&gt;Virtual Scroll (10000 Items)&lt;/h3&gt;
&lt;p-dropdown [options]="items" [(ngModel)]="item" placeholder="Select Item" [style]="&#123;'width':'200px'&#125;" [virtualScroll]="true" [itemSize]="31" [filter]="false" [autoWidth]="false"&gt;&lt;/p-dropdown&gt;
&lt;p-dropdown [options]="items" [(ngModel)]="item" placeholder="Select Item" [virtualScroll]="true" [itemSize]="31" [filter]="false"&gt;&lt;/p-dropdown&gt;
</code>
</pre>

Expand Down

0 comments on commit ccad045

Please sign in to comment.