Skip to content

Commit

Permalink
feat(ui5-select): introduced popoverMaxHeight property
Browse files Browse the repository at this point in the history 
The new property takes integer (the pixels) and restricts the maximum
height of the Select's popover.

Also maxHeight property is introduced in the Popover so the above
mentioned requirement is possible and calculated correctly.

Implements: SAP#4503
  • Loading branch information
@plamenivanov91
plamenivanov91 committed Jun 4, 2024
1 parent 1924b54 commit 0ede1da
Show file tree
Hide file tree
Showing 4 changed files with 109 additions and 0 deletions.
14 changes: 14 additions & 0 deletions packages/main/src/Popover.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -186,6 +186,17 @@ class Popover extends Popup {
@property({ type: PopoverPlacement, defaultValue: PopoverPlacement.End })
actualPlacement!: `${PopoverPlacement}`;

/**
* Defines the maximum height of the popover in px.
*
* **Note:** If omitted, the maximum height will be calculated automatically so the popover spans through
* the remaining visible part of the viewport.
* @default undefined
* @public
*/
@property({ validator: Integer })
maxHeight?: number;

@property({ validator: Integer, noAttribute: true })
_maxHeight?: number;

Expand Down Expand Up @@ -574,6 +585,9 @@ class Popover extends Popup {
}

this._maxHeight = Math.round(maxHeight - Popover.VIEWPORT_MARGIN);
if (this.maxHeight && this.maxHeight < this._maxHeight) {
this._maxHeight = this.maxHeight;
}
this._maxWidth = Math.round(maxWidth - Popover.VIEWPORT_MARGIN);

if (this._left === undefined || Math.abs(this._left - left) > 1.5) {
Expand Down
11 changes: 11 additions & 0 deletions packages/main/src/Select.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -256,6 +256,17 @@ class Select extends UI5Element implements IFormInputElement {
@property()
accessibleNameRef!: string;

/**
* Defines the maximum height of the Select's dropdown/popover in px.
*
* **Note:** If omitted, the maximum height will be calculated automatically so the popover spans through
* the remaining visible part of the viewport.
* @default undefined
* @public
*/
@property({ validator: Integer })
popoverMaxHeight?: number;

/**
* @private
*/
Expand Down
1 change: 1 addition & 0 deletions packages/main/src/SelectPopover.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<ui5-responsive-popover
hide-arrow
prevent-initial-focus
max-height={{popoverMaxHeight}}
placement="Bottom"
class="ui5-select-popover {{classes.popover}}"
horizontal-align="Start"
Expand Down
83 changes: 83 additions & 0 deletions packages/main/test/pages/Select.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -177,6 +177,89 @@ <h2>Select "value" property</h2>
<ui5-button id="btnSetInvalidValue">select.value = "NAN"</ui5-button>
</section>

<section>
<h2>Popover Max Height prop (200px)</h2>
<ui5-select id="selectPopoverMaxHeight" popover-max-height="200">
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option>Compact</ui5-option>
<ui5-option selected>Condensed</ui5-option>
</ui5-select>
</section>
</body>
<script>
var countries = [{ key: "Aus", text: "Australia" }, { key: "Aruba", text: "Aruba" }, { key: "Antigua", text: "Antigua and Barbuda" }, { key: "Bel", text: "Belgium" }, { key: "Bg", text: "Bulgaria" }, { key: "Bra", text: "Brazil" }];
Expand Down

0 comments on commit 0ede1da

Please sign in to comment.