fix: add required vertical space for combo-box overlay

packages/combo-box/src/vaadin-combo-box-overlay.js

@@ -52,6 +52,12 @@ export class ComboBoxOverlay extends ComboBoxOverlayMixin(Overlay) {
 
     return memoizedTemplate;
   }
+
+  constructor() {
+    super();
+
+    this.requiredVerticalSpace = 200;
+  }
 }
 
 customElements.define(ComboBoxOverlay.is, ComboBoxOverlay);

packages/combo-box/test/overlay-position.test.js

@@ -1,21 +1,9 @@
 import { expect } from '@esm-bundle/chai';
 import { aTimeout, fixtureSync, isIOS } from '@vaadin/testing-helpers';
-import '../src/vaadin-combo-box.js';
-import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import '../vaadin-combo-box.js';
+import './not-animated-styles.js';
 import { makeItems, setInputValue } from './helpers.js';
 
-class XFixed extends PolymerElement {
-  static get template() {
-    return html`
-      <div style="position: fixed;">
-        <slot></slot>
-      </div>
-    `;
-  }
-}
-
-customElements.define('x-fixed', XFixed);
-
 describe('overlay position', () => {
   let comboBox, overlayPart, inputField;
 
@@ -33,6 +21,13 @@ describe('overlay position', () => {
   }
 
   beforeEach(async () => {
+    fixtureSync(`
+      <style>
+        vaadin-combo-box-overlay::part(overlay) {
+          margin: 0 !important;
+        }
+      </style>`);
+
     comboBox = fixtureSync(`<vaadin-combo-box label='comboBox' style='width: 300px;' items='[1]'></vaadin-combo-box>`);
     const comboBoxRect = comboBox.getBoundingClientRect();
     comboBox.items = makeItems(20);
@@ -168,6 +163,56 @@ describe('overlay position', () => {
       await aTimeout(0);
       expect(overlayPart.getBoundingClientRect().bottom).to.closeTo(inputField.getBoundingClientRect().top, 1);
     });
+
+    it('should be above input when near bottom', async () => {
+      moveComboBox(xCenter, yBottom - 200, 300);
+
+      comboBox.open();
+      await aTimeout(1);
+      expect(overlayPart.getBoundingClientRect().bottom).to.closeTo(inputField.getBoundingClientRect().top, 1);
+    });
+
+    it('should be below input when far from bottom', async () => {
+      moveComboBox(xCenter, yBottom - 220, 300);
+
+      comboBox.open();
+      await aTimeout(1);
+      expect(overlayPart.getBoundingClientRect().top).to.closeTo(inputField.getBoundingClientRect().bottom, 1);
+    });
+
+    describe('lazy data provider', () => {
+      beforeEach(() => {
+        comboBox.items = undefined;
+
+        comboBox.dataProvider = (params, callback) => {
+          const index = params.page * params.pageSize;
+          const size = 20;
+          const result = [...Array(size).keys()].map((i) => {
+            return {
+              label: `Item ${index + i}`,
+              value: `item-${index + i}`,
+            };
+          });
+          setTimeout(() => callback(result, size), 100);
+        };
+      });
+
+      it('should be above input when near bottom', async () => {
+        moveComboBox(xCenter, yBottom - 200, 300);
+
+        comboBox.open();
+        await aTimeout(1);
+        expect(overlayPart.getBoundingClientRect().bottom).to.closeTo(inputField.getBoundingClientRect().top, 1);
+      });
+
+      it('should be below input when far from bottom', async () => {
+        moveComboBox(xCenter, yBottom - 220, 300);
+
+        comboBox.open();
+        await aTimeout(1);
+        expect(overlayPart.getBoundingClientRect().top).to.closeTo(inputField.getBoundingClientRect().bottom, 1);
+      });
+    });
   });
 
   describe('overlay resizing', () => {

packages/overlay/src/vaadin-overlay-position-mixin.d.ts

@@ -54,4 +54,14 @@ export declare class PositionMixinClass {
    * @attr {boolean} no-vertical-overlap
    */
   noVerticalOverlap: boolean;
+
+  /**
+   * If the overlay content has no intrinsic height, this property can be used to set
+   * the minimum vertical space (in pixels) required by the overlay. Setting a value to
+   * the property effectively disables the content measurement in favor of using this
+   * fixed value for determining the open direction.
+   *
+   * @attr {number} required-vertical-space
+   **/
+  requiredVerticalSpace: number;
 }

packages/overlay/src/vaadin-overlay-position-mixin.js

@@ -93,12 +93,25 @@ export const PositionMixin = (superClass) =>
           type: Boolean,
           value: false,
         },
+
+        /**
+         * If the overlay content has no intrinsic height, this property can be used to set
+         * the minimum vertical space (in pixels) required by the overlay. Setting a value to
+         * the property effectively disables the content measurement in favor of using this
+         * fixed value for determining the open direction.
+         *
+         * @attr {number} required-vertical-space
+         **/
+        requiredVerticalSpace: {
+          type: Number,
+          value: 0,
+        },
       };
     }
 
     static get observers() {
       return [
-        '__positionSettingsChanged(horizontalAlign, verticalAlign, noHorizontalOverlap, noVerticalOverlap)',
+        '__positionSettingsChanged(horizontalAlign, verticalAlign, noHorizontalOverlap, noVerticalOverlap, requiredVerticalSpace)',
         '__overlayOpenedChanged(opened, positionTarget)',
       ];
     }
@@ -262,7 +275,8 @@ export const PositionMixin = (superClass) =>
     __shouldAlignStartVertically(targetRect) {
       // Using previous size to fix a case where window resize may cause the overlay to be squeezed
       // smaller than its current space before the fit-calculations.
-      const contentHeight = Math.max(this.__oldContentHeight || 0, this.$.overlay.offsetHeight);
+      const contentHeight =
+        this.requiredVerticalSpace || Math.max(this.__oldContentHeight || 0, this.$.overlay.offsetHeight);
       this.__oldContentHeight = this.$.overlay.offsetHeight;
 
       const viewportHeight = Math.min(window.innerHeight, document.documentElement.clientHeight);

packages/overlay/test/position-mixin.test.js

@@ -171,6 +171,22 @@ describe('position mixin', () => {
       expectEdgesAligned(TOP, TOP);
     });
 
+    it('should flip when out of required vertical space', () => {
+      overlay.requiredVerticalSpace = 200;
+      target.style.top = `${targetPositionToFlipOverlay - 100}px`;
+      updatePosition();
+      expectEdgesAligned(BOTTOM, BOTTOM);
+    });
+
+    it('should flip back when enough required vertical space', () => {
+      overlay.requiredVerticalSpace = 200;
+      target.style.top = `${targetPositionToFlipOverlay - 100}px`;
+      updatePosition();
+      target.style.top = `${targetPositionToFlipOverlay - 200}px`;
+      updatePosition();
+      expectEdgesAligned(TOP, TOP);
+    });
+
     it('should choose the bigger side when it fits neither', () => {
       overlayContent.style.height = `${document.documentElement.clientHeight}px`;
 
@@ -262,6 +278,22 @@ describe('position mixin', () => {
       expectEdgesAligned(BOTTOM, BOTTOM);
     });
 
+    it('should flip when out of required vertical space', () => {
+      overlay.requiredVerticalSpace = 200;
+      target.style.top = `${targetPositionToFlipOverlay + 100}px`;
+      updatePosition();
+      expectEdgesAligned(TOP, TOP);
+    });
+
+    it('should flip back when enough required vertical space', () => {
+      overlay.requiredVerticalSpace = 200;
+      target.style.top = `${targetPositionToFlipOverlay + 100}px`;
+      updatePosition();
+      target.style.top = `${targetPositionToFlipOverlay + 200}px`;
+      updatePosition();
+      expectEdgesAligned(BOTTOM, BOTTOM);
+    });
+
     it('should choose the bigger side when it fits neither', () => {
       overlayContent.style.height = `${document.documentElement.clientHeight}px`;
 

packages/overlay/test/typings/overlay.types.ts

@@ -66,3 +66,4 @@ assertType<boolean>(customOverlay.noVerticalOverlap);
 assertType<'end' | 'start'>(customOverlay.horizontalAlign);
 assertType<'bottom' | 'top'>(customOverlay.verticalAlign);
 assertType<HTMLElement>(customOverlay.positionTarget);
+assertType<number>(customOverlay.requiredVerticalSpace);