Skip to content

Commit

Permalink
fix(Select): now correctly opening up/down based on position within v…
Browse files Browse the repository at this point in the history 
…iewport
  • Loading branch information
@benjamincharity
benjamincharity committed Feb 14, 2019
1 parent 69e5f05 commit 159568f
Show file tree
Hide file tree
Showing 4 changed files with 114 additions and 83 deletions.
159 changes: 91 additions & 68 deletions demo/app/components/select/select.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,35 +6,46 @@ <h3 tsVerticalSpacing>
<button (click)="log(myForm)">
Log form value
</button>

<br>
<br>

<ts-toggle [(ngModel)]="useSpacing">
Create space around select
<br>
<small>(useful for testing panel position logic)</small>
</ts-toggle>
</ts-card>

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<ng-container *ngIf="useSpacing">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</ng-container>



Expand Down Expand Up @@ -76,7 +87,17 @@ <h4 tsSelectOptionDisplay>None</h4>
[isDisabled]="option?.disabled"
*ngFor="let option of singleWithCustomTrigger | async"
>
{{ option.slug }}
<!--
-{{ option.slug }}
-->
<ng-template let-option>
<div class="myClass" style="padding: 8px 0;">
<h4 tsSelectOptionDisplay>{{ option?.foo }}</h4>
<small>An example of a larger template.</small>
<br>
<small>Slug: {{ option?.slug }}</small>
</div>
</ng-template>
</ts-select-option>
</ts-select>

Expand All @@ -85,46 +106,48 @@ <h4 tsSelectOptionDisplay>None</h4>
</div>
</ts-card>

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<ng-container *ngIf="useSpacing">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</ng-container>

<ts-card tsVerticalSpacing fxFlex>
<h3 tsCardTitle tsVerticalSpacing="small--1">
Expand Down
1 change: 1 addition & 0 deletions demo/app/components/select/select.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ export interface State {
export class SelectComponent implements OnInit {
simpleItems: number[] = [1, 2, 3, 4];
initialSimpleItemsSelection = 2;
useSpacing = false;
obj = {
id: 3,
text: 'baz',
Expand Down
2 changes: 0 additions & 2 deletions terminus-ui/select/src/select.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
[id]="id"
cdk-overlay-origin
#origin="cdkOverlayOrigin"
#field
>
<ts-label *ngIf="label">
{{ label }}
Expand Down Expand Up @@ -123,7 +122,6 @@
[cdkConnectedOverlayPositions]="positions"
[cdkConnectedOverlayMinWidth]="triggerRect?.width"
[cdkConnectedOverlayWidth]="triggerRect?.width"
[cdkConnectedOverlayOffsetX]="0"
[cdkConnectedOverlayOffsetY]="offsetY"
(backdropClick)="close()"
(attach)="onAttached()"
Expand Down
35 changes: 22 additions & 13 deletions terminus-ui/select/src/select.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -364,6 +364,12 @@ export class TsSelectComponent implements
overlayX: 'start',
overlayY: 'top',
},
{
originX: 'start',
originY: 'bottom',
overlayX: 'start',
overlayY: 'bottom',
},
];

/**
Expand Down Expand Up @@ -537,10 +543,17 @@ export class TsSelectComponent implements
}

/**
* Calculates the height of the select's options using the font size
* Calculates the height of the option's offsetHeight. Fall back to the trigger font size if no options exist.
*/
private get itemHeight(): number {
return this.triggerFontSize * SELECT_ITEM_HEIGHT_EM;
if (this.options.length) {
// Try to use the 2nd option in case the first option is blank or a filter etc. Fall back to the first item if needed.
const options = this.options.toArray();
const option = options[1] || options[0];
return option.elementRef.nativeElement.offsetHeight;
} else {
return this.triggerFontSize * SELECT_ITEM_HEIGHT_EM;
}
}

/**
Expand Down Expand Up @@ -1749,17 +1762,13 @@ export class TsSelectComponent implements
// total panel - offsetY - trigger height
const panelHeightBottom = totalPanelHeight - panelHeightTop - (this.triggerRect ? this.triggerRect.height : 0);

// TODO: Disabling panel adjust in order to get a hotfix out. This will be revisisted ASAP so I am leaving the commented code.
/*
*if (panelHeightBottom > bottomSpaceAvailable) {
* this.adjustPanelUp(panelHeightBottom, bottomSpaceAvailable);
*} else if (panelHeightTop > topSpaceAvailable) {
* this.adjustPanelDown(panelHeightTop, topSpaceAvailable, maxScroll);
*} else {
* this.transformOrigin = this.getOriginBasedOnOption();
*}
*/
this.transformOrigin = this.getOriginBasedOnOption();
if (panelHeightBottom > bottomSpaceAvailable) {
this.adjustPanelUp(panelHeightBottom, bottomSpaceAvailable);
} else if (panelHeightTop > topSpaceAvailable) {
this.adjustPanelDown(panelHeightTop, topSpaceAvailable, maxScroll);
} else {
this.transformOrigin = this.getOriginBasedOnOption();
}
}


Expand Down

0 comments on commit 159568f

Please sign in to comment.