feat: add no-vertical-overlap prop to vaadin-select

packages/select/src/vaadin-lit-select.js

@@ -90,6 +90,7 @@ class Select extends SelectBaseMixin(ElementMixin(ThemableMixin(PolylitMixin(Lit
         .renderer="${this.renderer || this.__defaultRenderer}"
         ?phone="${this._phone}"
         theme="${this._theme}"
+        ?no-vertical-overlap="${this.noVerticalOverlap}"
         @opened-changed="${this._onOpenedChanged}"
         @vaadin-overlay-open="${this._onOverlayOpen}"
       ></vaadin-select-overlay>

packages/select/src/vaadin-select-base-mixin.d.ts

@@ -102,6 +102,14 @@ export declare class SelectBaseMixinClass {
    */
   readonly: boolean;
 
+  /**
+   * Defines whether the overlay should overlap the target element
+   * in the y-axis, or be positioned right above/below it.
+   *
+   * @attr {boolean} no-vertical-overlap
+   */
+  noVerticalOverlap: boolean;
+
   /**
    * Requests an update for the content of the select.
    * While performing the update, it invokes the renderer passed in the `renderer` property.

packages/select/src/vaadin-select-base-mixin.js

@@ -127,6 +127,17 @@ export const SelectBaseMixin = (superClass) =>
           reflectToAttribute: true,
         },
 
+        /**
+         * Defines whether the overlay should overlap the target element
+         * in the y-axis, or be positioned right above/below it.
+         *
+         * @attr {boolean} no-vertical-overlap
+         */
+        noVerticalOverlap: {
+          type: Boolean,
+          value: false,
+        },
+
         /** @private */
         _phone: Boolean,
 

packages/select/src/vaadin-select.js

@@ -184,6 +184,7 @@ class Select extends SelectBaseMixin(ElementMixin(ThemableMixin(PolymerElement))
         with-backdrop="[[_phone]]"
         phone$="[[_phone]]"
         theme$="[[_theme]]"
+        no-vertical-overlap$="[[noVerticalOverlap]]"
         on-vaadin-overlay-open="_onOverlayOpen"
       ></vaadin-select-overlay>
 

packages/select/test/select.common.js

@@ -638,6 +638,35 @@ describe('vaadin-select', () => {
         expect(changeSpy.callCount).to.equal(1);
       });
     });
+
+    describe('no-vertical-overlap', () => {
+      it('should overlap the input by default', async () => {
+        select.opened = true;
+        await nextUpdate(select);
+        const overlayRect = select._overlayElement.getBoundingClientRect();
+        const inputRect = select._inputContainer.getBoundingClientRect();
+        expect(overlayRect.top).to.be.equal(inputRect.top);
+      });
+
+      it('should toggle the `no-vertical-overlap` atrribute in the overlay element', async () => {
+        select.noVerticalOverlap = true;
+        await nextUpdate(select);
+        expect(select._overlayElement.hasAttribute('no-vertical-overlap')).to.be.true;
+
+        select.noVerticalOverlap = false;
+        await nextUpdate(select);
+        expect(select._overlayElement.hasAttribute('no-vertical-overlap')).to.be.false;
+      });
+
+      it('should not overlap the input when overlay is opened', async () => {
+        select.noVerticalOverlap = true;
+        select.opened = true;
+        await nextUpdate(select);
+        const overlayRect = select._overlayElement.getBoundingClientRect();
+        const inputRect = select._inputContainer.getBoundingClientRect();
+        expect(overlayRect.top).to.be.equal(inputRect.bottom);
+      });
+    });
   });
 
   describe('with value', () => {

packages/select/theme/lumo/vaadin-select-styles.js

@@ -110,6 +110,14 @@ const selectOverlay = css`
     justify-content: flex-end;
   }
 
+  :host([no-vertical-overlap][top-aligned]) [part='overlay'] {
+    margin-block-start: var(--lumo-space-xs);
+  }
+
+  :host([no-vertical-overlap][bottom-aligned]) [part='overlay'] {
+    margin-block-end: var(--lumo-space-xs);
+  }
+
   :host([theme~='align-left']) {
     text-align: left;
   }