-
- <${hostTag}>
-
-
Content
-
Footer
-
-
-
- `);
- host = element.querySelector(`${hostTag}`);
- });
-
- it('should return element itself in case if it is focusable', () => {
- const outerInput = element.querySelector('#outer');
- expect(getClosestFocusable(outerInput)).to.equal(outerInput);
-
- const innerInput = host.shadowRoot.querySelector('#inner');
- expect(getClosestFocusable(innerInput)).to.equal(innerInput);
- });
-
- it('should return parent element in case if it is focusable', () => {
- expect(getClosestFocusable(host)).to.equal(host.parentElement);
- });
-
- it('should return element in shadow DOM for a slotted element', () => {
- const content = element.querySelector('#content');
- const focusable = host.shadowRoot.querySelector('[tabindex="0"]');
- expect(getClosestFocusable(content)).to.equal(focusable);
- });
-
- it('should return element outside shadow DOM for a slotted element', () => {
- const footer = element.querySelector('[slot="footer"]');
- expect(getClosestFocusable(footer)).to.equal(host.parentElement);
- });
-
- it('should return element outside shadow DOM for a shadow root', () => {
- expect(getClosestFocusable(host.shadowRoot)).to.equal(host.parentElement);
- });
-
- it('should return undefined if no focusable ancestor is found', () => {
- expect(getClosestFocusable(element)).to.be.undefined;
- });
- });
});
diff --git a/packages/overlay/src/vaadin-overlay.js b/packages/overlay/src/vaadin-overlay.js
index d25cd3ca6b..dc805d0566 100644
--- a/packages/overlay/src/vaadin-overlay.js
+++ b/packages/overlay/src/vaadin-overlay.js
@@ -11,7 +11,6 @@ import { isIOS } from '@vaadin/component-base/src/browser-utils.js';
import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
import { FocusTrapController } from '@vaadin/component-base/src/focus-trap-controller.js';
-import { getClosestFocusable } from '@vaadin/component-base/src/focus-utils.js';
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
/**
@@ -377,10 +376,6 @@ class Overlay extends ThemableMixin(DirMixin(ControllerMixin(PolymerElement))) {
this.$.backdrop.addEventListener('click', () => {});
this.addController(this.__focusTrapController);
-
- this.addEventListener('mousedown', (e) => {
- this._onMouseDown(e);
- });
}
/** @private */
@@ -991,16 +986,6 @@ class Overlay extends ThemableMixin(DirMixin(ControllerMixin(PolymerElement))) {
this.style.zIndex = zIndex;
this.__zIndex = zIndex || parseFloat(getComputedStyle(this).zIndex);
}
-
- /** @private */
- _onMouseDown(event) {
- const target = event.target;
- const focusable = getClosestFocusable(target.focusElement || target);
- if (focusable) {
- event.preventDefault();
- focusable.focus();
- }
- }
}
customElements.define(Overlay.is, Overlay);
diff --git a/packages/overlay/test/overlay.test.js b/packages/overlay/test/overlay.test.js
index 22b154afc6..d2ec854420 100644
--- a/packages/overlay/test/overlay.test.js
+++ b/packages/overlay/test/overlay.test.js
@@ -1,17 +1,5 @@
import { expect } from '@esm-bundle/chai';
-import {
- click,
- enterKeyDown,
- escKeyDown,
- fixtureSync,
- makeMouseEvent,
- middleOfNode,
- mousedown,
- mouseup,
- nextRender,
- oneEvent,
-} from '@vaadin/testing-helpers';
-import { resetMouse, sendMouse } from '@web/test-runner-commands';
+import { click, enterKeyDown, escKeyDown, fixtureSync, mousedown, mouseup, oneEvent } from '@vaadin/testing-helpers';
import sinon from 'sinon';
import '@vaadin/text-field/vaadin-text-field.js';
import '../vaadin-overlay.js';
@@ -209,25 +197,16 @@ describe('vaadin-overlay', () => {
let parent, overlay, overlayPart, backdrop;
beforeEach(async () => {
- parent = document.createElement('div');
- overlay = fixtureSync('
', parent);
- overlay.renderer = (root) => {
- if (!root.firstChild) {
- const div = document.createElement('div');
- div.textContent = 'overlay content';
- root.appendChild(div);
-
- const btn = document.createElement('button');
- btn.textContent = 'Button';
-
- const wrapper = document.createElement('p');
- // Mimic the DelegateFocusMixin logic
- wrapper.focusElement = btn;
- wrapper.appendChild(btn);
-
- root.appendChild(wrapper);
- }
- };
+ parent = fixtureSync(`
+
+
+
+ overlay-content
+
+
+
+ `);
+ overlay = parent.children[0];
overlayPart = overlay.$.overlay;
backdrop = overlay.$.backdrop;
overlay._observer.flush();
@@ -420,52 +399,6 @@ describe('vaadin-overlay', () => {
expect(overlay.opened).to.be.true;
});
});
-
- describe('mousedown on content', () => {
- afterEach(async () => {
- await resetMouse();
- });
-
- it('should not move focus to body on clicking the content element', async () => {
- const div = overlay.querySelector('div');
- const { x, y } = middleOfNode(div);
-
- await sendMouse({ type: 'click', position: [Math.floor(x), Math.floor(y)] });
- await nextRender();
-
- expect(document.activeElement).to.be.equal(overlay);
- });
-
- it('should move focus to focusElement if the click target has one', async () => {
- const p = overlay.querySelector('p');
- const { x, y } = middleOfNode(p);
-
- await sendMouse({ type: 'click', position: [Math.floor(x), Math.floor(y)] });
- await nextRender();
-
- expect(document.activeElement).to.be.equal(p.querySelector('button'));
- });
-
- it('should prevent default on content mousedown', () => {
- const div = overlay.querySelector('div');
- const event = makeMouseEvent('mousedown', middleOfNode(div), div);
- expect(event.defaultPrevented).to.be.true;
- });
-
- it('should focus an overlay part on content mousedown', () => {
- const div = overlay.querySelector('div');
- const spy = sinon.spy(overlayPart, 'focus');
- mousedown(div);
- expect(spy.calledOnce).to.be.true;
- });
-
- it('should focus a focusable content element, if any', () => {
- const button = overlay.querySelector('button');
- const spy = sinon.spy(button, 'focus');
- mousedown(button);
- expect(spy.calledOnce).to.be.true;
- });
- });
});
describe('position and sizing', () => {