Nested content
@@ -222,6 +222,23 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
expect(nestedOverlayEl._overlayCtrl.contentNode).to.be.displayed;
});
+ it('[global] allows for moving of the element', async () => {
+ const el = await fixture(html`
+ <${tag}>
+ content of the nested overlay
+
+
+ `);
+ if (el._overlayCtrl.placementMode === 'global') {
+ expect(getGlobalOverlayNodes().length).to.equal(1);
+
+ const moveTarget = await fixture('');
+ moveTarget.appendChild(el);
+ await el.updateComplete;
+ expect(getGlobalOverlayNodes().length).to.equal(1);
+ }
+ });
+
it('reconstructs the overlay when disconnected and reconnected to DOM (support for nested overlay nodes)', async () => {
const nestedEl = await fixture(html`
<${tag} id="nest">
@@ -241,15 +258,12 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
`);
if (el._overlayCtrl.placementMode === 'global') {
- // Specifically checking the output in global root node, because the _contentOverlayNode still references
- // the node that was removed in the teardown but hasn't been garbage collected due to reference to it still existing..
-
// Find the outlets that are not backdrop outlets
const overlayContainerNodes = getGlobalOverlayNodes();
expect(overlayContainerNodes.length).to.equal(2);
- const lastContentNodeInContainer = overlayContainerNodes[0];
+ const lastContentNodeInContainer = overlayContainerNodes[1];
// Check that the last container is the nested one with the intended content
- expect(lastContentNodeInContainer.firstElementChild.innerText).to.equal(
+ expect(lastContentNodeInContainer.firstElementChild.firstChild.textContent).to.equal(
'content of the nested overlay',
);
expect(lastContentNodeInContainer.firstElementChild.slot).to.equal('content');
@@ -259,43 +273,5 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
expect(contentNode.innerText).to.equal('content of the nested overlay');
}
});
-
- it("doesn't tear down controller when dom nodes are being moved around", async () => {
- const nestedEl = await fixture(html`
- <${tag} id="nest">
- content of the nested overlay
-
-
- `);
-
- const setupOverlayCtrlSpy = sinon.spy(nestedEl, '_setupOverlayCtrl');
- const teardownOverlayCtrlSpy = sinon.spy(nestedEl, '_teardownOverlayCtrl');
-
- const el = await fixture(html`
- <${tag} id="main">
-
- open nested overlay:
- ${nestedEl}
-
-
-
- `);
-
- // Even though many connected/disconnected calls take place,
- // we detect we are in the middle of a 'move'
- expect(teardownOverlayCtrlSpy).to.not.have.been.called;
- expect(setupOverlayCtrlSpy).to.not.have.been.called;
-
- // Now move nestedEl to an offline node
- const offlineNode = document.createElement('div');
- offlineNode.appendChild(nestedEl);
- await aTimeout();
- // And we detect this time the disconnect was 'permanent'
- expect(teardownOverlayCtrlSpy.callCount).to.equal(1);
-
- el._overlayContentNode.appendChild(nestedEl);
- await aTimeout();
- expect(setupOverlayCtrlSpy.callCount).to.equal(1);
- });
});
}
diff --git a/packages/overlays/test/OverlayController.test.js b/packages/overlays/test/OverlayController.test.js
index e4535bcc7..4411537ba 100644
--- a/packages/overlays/test/OverlayController.test.js
+++ b/packages/overlays/test/OverlayController.test.js
@@ -188,6 +188,42 @@ describe('OverlayController', () => {
ctrl.teardown();
expect(ctrl.manager.globalRootNode.children.length).to.equal(0);
});
+
+ it('[global] restores contentNode if it was/is a projected node', async () => {
+ const shadowHost = document.createElement('div');
+ shadowHost.id = 'shadowHost';
+ shadowHost.attachShadow({ mode: 'open' });
+ shadowHost.shadowRoot.innerHTML = `
+
+
+ `;
+ const contentNode = document.createElement('div');
+ contentNode.slot = 'contentNode';
+ shadowHost.appendChild(contentNode);
+
+ const wrapper = await fixture('');
+ // Ensure the contentNode is connected to DOM
+ wrapper.appendChild(shadowHost);
+
+ // has one child =
+ expect(shadowHost.children.length).to.equal(1);
+
+ const ctrl = new OverlayController({
+ ...withLocalTestConfig(),
+ placementMode: 'global',
+ contentNode,
+ contentWrapperNode: shadowHost,
+ });
+
+ // has no children as content gets moved to the body
+ expect(shadowHost.children.length).to.equal(0);
+ ctrl.teardown();
+
+ // restores original light dom in teardown
+ expect(shadowHost.children.length).to.equal(1);
+ });
});
describe('Node Configuration', () => {
@@ -1372,7 +1408,7 @@ describe('OverlayController', () => {
}).to.throw('[OverlayController] You need to provide a .contentNode');
});
- it('throws if contentNodewrapper is not provided for projected contentNode', async () => {
+ it('throws if contentNodeWrapper is not provided for projected contentNode', async () => {
const shadowHost = document.createElement('div');
shadowHost.attachShadow({ mode: 'open' });
shadowHost.shadowRoot.innerHTML = `
diff --git a/packages/select-rich/src/LionSelectRich.js b/packages/select-rich/src/LionSelectRich.js
index 0557f374b..708b2a03e 100644
--- a/packages/select-rich/src/LionSelectRich.js
+++ b/packages/select-rich/src/LionSelectRich.js
@@ -195,10 +195,11 @@ export class LionSelectRich extends ScopedElementsMixin(
}
connectedCallback() {
+ // need to do this before anything else
+ this._listboxNode.registrationTarget = this;
if (super.connectedCallback) {
super.connectedCallback();
}
- this._listboxNode.registrationTarget = this;
this._invokerNode.selectedElement = this.formElements[this.checkedIndex];
this.__setupInvokerNode();
this.__setupListboxNode();
@@ -213,10 +214,6 @@ export class LionSelectRich extends ScopedElementsMixin(
this.registrationComplete.then(() => {
this.__initInteractionStates();
});
-
- this._overlaySetupComplete.then(() => {
- this.__setupOverlay();
- });
}
disconnectedCallback() {
@@ -226,6 +223,10 @@ export class LionSelectRich extends ScopedElementsMixin(
if (this._labelNode) {
this._labelNode.removeEventListener('click', this.__toggleChecked);
}
+ this._scrollTargetNode.removeEventListener('keydown', this.__overlayOnHide);
+ this.__teardownInvokerNode();
+ this.__teardownListboxNode();
+ this.__teardownEventListeners();
}
requestUpdateInternal(name, oldValue) {
@@ -658,7 +659,8 @@ export class LionSelectRich extends ScopedElementsMixin(
}
}
- __setupOverlay() {
+ _setupOverlayCtrl() {
+ super._setupOverlayCtrl();
this._initialInheritsReferenceWidth = this._overlayCtrl.inheritsReferenceWidth;
this.__overlayBeforeShow = () => {
if (this.hasNoDefaultSelected) {
@@ -688,10 +690,6 @@ export class LionSelectRich extends ScopedElementsMixin(
this._overlayCtrl.removeEventListener('show', this.__overlayOnShow);
this._overlayCtrl.removeEventListener('before-show', this.__overlayBeforeShow);
this._overlayCtrl.removeEventListener('hide', this.__overlayOnHide);
- this._scrollTargetNode.removeEventListener('keydown', this.__overlayOnHide);
- this.__teardownInvokerNode();
- this.__teardownListboxNode();
- this.__teardownEventListeners();
}
__preventScrollingWithArrowKeys(ev) {
diff --git a/packages/tooltip/src/LionTooltip.js b/packages/tooltip/src/LionTooltip.js
index dcb69dd68..d4ce8f6dd 100644
--- a/packages/tooltip/src/LionTooltip.js
+++ b/packages/tooltip/src/LionTooltip.js
@@ -90,12 +90,6 @@ export class LionTooltip extends OverlayMixin(LitElement) {
this.__setupRepositionCompletePromise();
}
- connectedCallback() {
- if (super.connectedCallback) {
- super.connectedCallback();
- }
- }
-
render() {
return html`