diff --git a/src/vaadin-dropdown-menu.html b/src/vaadin-dropdown-menu.html index 9316e9a9..bcad9ee9 100644 --- a/src/vaadin-dropdown-menu.html +++ b/src/vaadin-dropdown-menu.html @@ -473,7 +473,7 @@ } _setPosition() { - const inputRect = this.focusElement.getBoundingClientRect(); + const inputRect = this._inputElement.shadowRoot.querySelector('[part~="input-field"]').getBoundingClientRect(); const viewportHeight = Math.min(window.innerHeight, document.documentElement.clientHeight); const bottomAlign = inputRect.top > (viewportHeight - inputRect.height) / 2; diff --git a/test/dropdown-menu-test.html b/test/dropdown-menu-test.html index ec2b6dbb..cee0673e 100644 --- a/test/dropdown-menu-test.html +++ b/test/dropdown-menu-test.html @@ -450,9 +450,10 @@ }); it('should open the overlay on top left corner by default on input click', () => { + const inputFieldBlock = input.shadowRoot.querySelector('[part~="input-field"]'); Enter(input); - expect(dropdown._overlayElement.getBoundingClientRect().top).to.be.equal(input.getBoundingClientRect().top); - expect(dropdown._overlayElement.getBoundingClientRect().left).to.be.equal(input.getBoundingClientRect().left); + expect(dropdown._overlayElement.getBoundingClientRect().top).to.be.equal(inputFieldBlock.getBoundingClientRect().top); + expect(dropdown._overlayElement.getBoundingClientRect().left).to.be.equal(inputFieldBlock.getBoundingClientRect().left); }); it('should store the text-field width in the custom CSS property on overlay opening', () => { diff --git a/test/scrollable-viewport-test.html b/test/scrollable-viewport-test.html index 25ffd302..db8fa84f 100644 --- a/test/scrollable-viewport-test.html +++ b/test/scrollable-viewport-test.html @@ -15,23 +15,33 @@ @@ -41,23 +51,30 @@ MockInteractions.keyDownOn(target, 13, [], 'Enter'); } - function scrollWindow(value, scrollLeft) { - window.scroll(scrollLeft || 0, 150); + function scrollContainer(container, value, scrollLeft) { + if (scrollLeft) { + container.scrollLeft = scrollLeft; + } + container.scrollTop = value; window.dispatchEvent(new CustomEvent('scroll', {bubbles: true})); } describe('scrollable-viewport', () => { - var container, dropdown, input; + var scrollableContainer, container, dropdown, input, inputFieldBlock; beforeEach(done => { - container = fixture('dropdown'); + scrollableContainer = fixture('dropdown'); + container = scrollableContainer.querySelector('#container'); dropdown = container.querySelector('vaadin-dropdown-menu'); + + // Input without label and indents input = dropdown._inputElement; + inputFieldBlock = input.shadowRoot.querySelector('[part~="input-field"]'); const viewportHeight = Math.min(window.innerHeight, document.documentElement.clientHeight); // Position the input in the lower part of the viewport container.style.paddingTop = viewportHeight / 2 + 'px'; - document.documentElement.scrollTop = 0; + scrollableContainer.scrollTop = 0; flush(done); }); @@ -65,31 +82,31 @@ it('should toggle bottom-aligned attribute dependening on the part of the viewport', () => { Enter(input); expect(dropdown._overlayElement.hasAttribute('bottom-aligned')).to.be.true; - scrollWindow(150); + scrollContainer(scrollableContainer, 150); expect(dropdown._overlayElement.hasAttribute('bottom-aligned')).to.be.false; }); it('should update the position on scrolling', () => { Enter(input); - expect(dropdown._overlayElement.getBoundingClientRect().bottom).to.be.equal(input.getBoundingClientRect().bottom); - expect(dropdown._overlayElement.getBoundingClientRect().left).to.be.equal(input.getBoundingClientRect().left); + expect(dropdown._overlayElement.getBoundingClientRect().bottom).to.be.equal(inputFieldBlock.getBoundingClientRect().bottom); + expect(dropdown._overlayElement.getBoundingClientRect().left).to.be.equal(inputFieldBlock.getBoundingClientRect().left); - scrollWindow(40, 40); + scrollContainer(scrollableContainer, 40, 40); - expect(dropdown._overlayElement.getBoundingClientRect().bottom).to.be.equal(input.getBoundingClientRect().bottom); - expect(dropdown._overlayElement.getBoundingClientRect().left).to.be.equal(input.getBoundingClientRect().left); + expect(dropdown._overlayElement.getBoundingClientRect().bottom).to.be.equal(inputFieldBlock.getBoundingClientRect().bottom); + expect(dropdown._overlayElement.getBoundingClientRect().left).to.be.equal(inputFieldBlock.getBoundingClientRect().left); }); it('should update the position on iron-resize event', () => { Enter(input); - expect(dropdown._overlayElement.getBoundingClientRect().bottom).to.be.equal(input.getBoundingClientRect().bottom); - expect(dropdown._overlayElement.getBoundingClientRect().left).to.be.equal(input.getBoundingClientRect().left); + expect(dropdown._overlayElement.getBoundingClientRect().bottom).to.be.equal(inputFieldBlock.getBoundingClientRect().bottom); + expect(dropdown._overlayElement.getBoundingClientRect().left).to.be.equal(inputFieldBlock.getBoundingClientRect().left); container.style.paddingTop = '200px'; dropdown.dispatchEvent(new CustomEvent('iron-resize', {bubbles: true})); - expect(dropdown._overlayElement.getBoundingClientRect().top).to.be.equal(input.getBoundingClientRect().top); - expect(dropdown._overlayElement.getBoundingClientRect().left).to.be.equal(input.getBoundingClientRect().left); + expect(dropdown._overlayElement.getBoundingClientRect().top).to.be.equal(inputFieldBlock.getBoundingClientRect().top); + expect(dropdown._overlayElement.getBoundingClientRect().left).to.be.equal(inputFieldBlock.getBoundingClientRect().left); }); });