fix: explicitly set relative positioning on scroll containers (#5714) (…

…#5721)
vaadin · Mar 28, 2023 · dfc9800 · dfc9800
1 parent e4d0f83
commit dfc9800
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 2 deletions.
diff --git a/packages/combo-box/src/vaadin-combo-box-scroller.js b/packages/combo-box/src/vaadin-combo-box-scroller.js
@@ -41,6 +41,7 @@ export class ComboBoxScroller extends PolymerElement {
           border-width: var(--_vaadin-combo-box-items-container-border-width);
           border-style: var(--_vaadin-combo-box-items-container-border-style);
           border-color: var(--_vaadin-combo-box-items-container-border-color);
+          position: relative;
         }
       </style>
       <div id="selector">

diff --git a/packages/combo-box/test/lit.test.js b/packages/combo-box/test/lit.test.js
@@ -1,8 +1,8 @@
 import { expect } from '@esm-bundle/chai';
-import { fixtureSync } from '@vaadin/testing-helpers';
+import { fixtureSync, nextFrame } from '@vaadin/testing-helpers';
 import './not-animated-styles.js';
 import '../vaadin-combo-box.js';
-import { html, render } from 'lit';
+import { html, LitElement, render } from 'lit';
 import { getViewportItems } from './helpers.js';
 
 describe('lit', () => {
@@ -36,4 +36,41 @@ describe('lit', () => {
       expect(getViewportItems(comboBox)[0].textContent).to.equal('new-0');
     });
   });
+
+  describe('complex structure', () => {
+    let container, comboBox, selector;
+
+    class TestSlotContainer extends LitElement {
+      render() {
+        return html`<slot></slot> `;
+      }
+    }
+    customElements.define('test-slot-container', TestSlotContainer);
+
+    class TestSlottedComboComponent extends LitElement {
+      render() {
+        return html`
+          <test-slot-container>
+            <vaadin-combo-box .items="${['First', 'Second', 'Third']}"></vaadin-combo-box>
+          </test-slot-container>
+        `;
+      }
+    }
+    customElements.define('test-slotted-combo-component', TestSlottedComboComponent);
+
+    beforeEach(async () => {
+      container = fixtureSync('<div></div>');
+      render(html`<test-slotted-combo-component></test-slotted-combo-component>`, container);
+      await nextFrame();
+      const component = container.querySelector('test-slotted-combo-component');
+      comboBox = component.shadowRoot.querySelector('vaadin-combo-box');
+      selector = comboBox._scroller.shadowRoot.children.selector;
+    });
+
+    it('should not show horizontal scrollbar when placed in slotted container', () => {
+      comboBox.open();
+
+      expect(getComputedStyle(selector).position).to.equal('relative');
+    });
+  });
 });
diff --git a/packages/virtual-list/src/vaadin-virtual-list.js b/packages/virtual-list/src/vaadin-virtual-list.js
@@ -58,6 +58,10 @@ class VirtualList extends ElementMixin(ControllerMixin(ThemableMixin(PolymerElem
         :host(:not([grid])) #items > ::slotted(*) {
           width: 100%;
         }
+
+        #items {
+          position: relative;
+        }
       </style>
 
       <div id="items">