@lion/ui 0.21.1 → 0.23.0

package/components/overlays/test/OverlayController.test.js

@@ -115,26 +115,35 @@ const withLocalTestConfig = () =>
  */
 async function createNestedEscControllers(parentContent) {
   const childContent = /** @type {HTMLDivElement} */ (parentContent.querySelector('div[id]'));
-  // Assert valid fixure
-  const isValidFixture =
-    (parentContent.id.startsWith('parent-overlay--hidesOnEsc') ||
-      parentContent.id.startsWith('parent-overlay--hidesOnOutsideEsc')) &&
-    (childContent.id.startsWith('child-overlay--hidesOnEsc') ||
-      childContent.id.startsWith('child-overlay--hidesOnOutsideEsc'));
-  if (!isValidFixture) {
-    throw new Error('Provide a valid fixture');
-  }
 
   if (parentContent.hasAttribute('data-convert-to-shadow-root')) {
     const shadowRootParent = parentContent.attachShadow({ mode: 'open' });
     shadowRootParent.appendChild(childContent);
   }
 
+  const parentConfig = {};
+  const childConfig = {};
+
   const parentHasOutsideOnEsc = parentContent.id.startsWith('parent-overlay--hidesOnOutsideEsc');
   const childHasOutsideOnEsc = childContent.id.startsWith('child-overlay--hidesOnOutsideEsc');
 
-  const parentConfig = parentHasOutsideOnEsc ? { hidesOnOutsideEsc: true } : { hidesOnEsc: true };
-  const childConfig = childHasOutsideOnEsc ? { hidesOnOutsideEsc: true } : { hidesOnEsc: true };
+  if (parentHasOutsideOnEsc) {
+    parentConfig.hidesOnOutsideEsc = true;
+  } else {
+    parentConfig.hidesOnEsc = true;
+  }
+  if (childHasOutsideOnEsc) {
+    childConfig.hidesOnOutsideEsc = true;
+  } else {
+    childConfig.hidesOnEsc = true;
+  }
+
+  const parentHasSyncChildrenCloseState =
+    parentContent.dataset.syncChildrenCloseState !== undefined;
+
+  if (parentHasSyncChildrenCloseState) {
+    parentConfig.syncChildrenCloseState = true;
+  }
 
   const parentOverlay = new OverlayController({
     ...withGlobalTestConfig(),
@@ -283,8 +292,9 @@ describe('OverlayController', () => {
             contentNode,
           });
         };
+
         expect(createOverlayController).to.throw(
-          '[OverlayController] Could not find a render target, since the provided contentNode is not connected to the DOM. Make sure that it is connected, e.g. by doing "document.body.appendChild(contentNode)", before passing it on.',
+          '[OverlayController] Could not find a render target, makes sure contentNode has a parent element (or contentWrapperNode is connected)',
         );
       });
 
@@ -346,6 +356,21 @@ describe('OverlayController', () => {
       await ctrl.hide();
       expect(ctrl.isShown).to.be.false;
     });
+
+    it('cleans up the dom structure it created', async () => {
+      const contentNode = /** @type {HTMLElement} */ (fixtureSync(html`<div>my content</div>`));
+      const ctrl = new OverlayController({
+        placementMode: 'global',
+        contentNode,
+      });
+      await ctrl.show();
+      expect(ctrl.contentWrapperNode).to.exist;
+      expect(ctrl.__wrappingDialogNode).to.exist;
+
+      await ctrl.teardown();
+      expect(ctrl.contentWrapperNode).to.not.exist;
+      expect(ctrl.__wrappingDialogNode).to.not.exist;
+    });
   });
 
   describe('Node Configuration', () => {
@@ -403,7 +428,7 @@ describe('OverlayController', () => {
               { ignoreAttributes: ['closedby'] },
             );
 
-            expect(el).lightDom.to.equal(`<div slot="content">projected</div>`);
+            expect(el).lightDom.to.equal(`<div data-content="" slot="content">projected</div>`);
           });
         });
 
@@ -425,7 +450,7 @@ describe('OverlayController', () => {
               `
               <dialog data-overlay-outer-wrapper="" open="" role="none" style="${wrappingDialogNodeStyle}">
                 <div data-id="content-wrapper">
-                  <div id="content">non projected</div>
+                  <div data-content="" id="content">non projected</div>
                 </div>
               </dialog>
           `,
@@ -434,6 +459,84 @@ describe('OverlayController', () => {
           });
         });
 
+        describe('When .contentWrapperNode is provided in a host that is not connected yet', () => {
+          /** @param {{ nested?: boolean }} [opts] */
+          function createDisconnectedHost({ nested = false } = {}) {
+            const host = document.createElement('div');
+            const shadowRoot = host.attachShadow({ mode: 'open' });
+            const wrapper = document.createElement('div');
+            wrapper.setAttribute('data-id', 'content-wrapper');
+            wrapper.innerHTML = '<slot name="content"></slot>';
+            if (nested) {
+              const section = document.createElement('section');
+              section.appendChild(wrapper);
+              shadowRoot.appendChild(section);
+            } else {
+              shadowRoot.appendChild(wrapper);
+            }
+            const content = document.createElement('div');
+            content.slot = 'content';
+            content.textContent = 'projected';
+            host.appendChild(content);
+            return { host, shadowRoot, wrapper, content };
+          }
+
+          it('does not throw and keeps the projected slot inside the wrapper', async () => {
+            const { host, shadowRoot, wrapper, content } = createDisconnectedHost();
+            expect(wrapper.isConnected).to.be.false;
+            const slot = /** @type {HTMLSlotElement} */ (content.assignedSlot);
+
+            const ctrl = new OverlayController({
+              ...withGlobalTestConfig(),
+              contentNode: content,
+              contentWrapperNode: wrapper,
+            });
+
+            expect(ctrl.contentWrapperNode).to.equal(wrapper);
+            expect(wrapper.parentElement?.tagName).to.equal('DIALOG');
+            expect(slot.parentElement).to.equal(wrapper);
+            expect(content.parentElement).to.equal(host);
+            expect(shadowRoot.querySelectorAll('slot').length).to.equal(1);
+          });
+
+          it('restores the same relocated slot at its original position on teardown', async () => {
+            const { host, shadowRoot, wrapper, content } = createDisconnectedHost({ nested: true });
+            const section = /** @type {HTMLElement} */ (shadowRoot.querySelector('section'));
+            const slot = /** @type {HTMLSlotElement} */ (content.assignedSlot);
+            const ctrl = new OverlayController({
+              ...withGlobalTestConfig(),
+              contentNode: content,
+              contentWrapperNode: wrapper,
+            });
+
+            ctrl.teardown();
+
+            expect(content.parentElement).to.equal(host);
+            expect(wrapper.parentElement).to.equal(section);
+            expect(slot.parentElement).to.equal(wrapper);
+            expect(shadowRoot.querySelector('dialog')).to.be.null;
+            expect(shadowRoot.querySelector('slot')).to.equal(slot);
+          });
+
+          it('survives repeated updateConfig calls and keeps slot ownership', async () => {
+            const { host, shadowRoot, wrapper, content } = createDisconnectedHost();
+            const slot = /** @type {HTMLSlotElement} */ (content.assignedSlot);
+            const ctrl = new OverlayController({
+              ...withGlobalTestConfig(),
+              contentNode: content,
+              contentWrapperNode: wrapper,
+            });
+
+            expect(() => ctrl.updateConfig({ trapsKeyboardFocus: true })).to.not.throw();
+            expect(() => ctrl.updateConfig({ trapsKeyboardFocus: false })).to.not.throw();
+
+            expect(content.parentElement).to.equal(host);
+            expect(shadowRoot.querySelectorAll('slot').length).to.equal(1);
+            expect(shadowRoot.querySelector('slot')).to.equal(slot);
+            expect(wrapper.contains(slot)).to.be.true;
+          });
+        });
+
         describe('When .contenWrapperNode provided', async () => {
           it('keeps the .contentWrapperNode for style application and wraps a <dialog role="none"> for top layer paints', async () => {
             const tagString = defineCE(
@@ -620,6 +723,7 @@ describe('OverlayController', () => {
     });
   });
 
+  // TODO: make features modular (so they can be treeshaken) and test their lifecycle within this desrcibe
   describe('Feature Configuration', () => {
     describe('trapsKeyboardFocus', () => {
       it('focuses the overlay on show', async () => {
@@ -854,7 +958,7 @@ describe('OverlayController', () => {
           )
         );
         const { parentOverlay, childOverlay } = await createNestedEscControllers(parentContent);
-        mimicEscapePress(childOverlay.contentNode);
+        await mimicEscapePress(childOverlay.contentNode);
 
         expect(parentOverlay.isShown).to.be.true;
         expect(childOverlay.isShown).to.be.true;
@@ -863,10 +967,7 @@ describe('OverlayController', () => {
 
     describe('Nested hidesOnEsc / hidesOnOutsideEsc', () => {
       describe('Parent has hidesOnEsc and child has hidesOnOutsideEsc', () => {
-        // TODO: This test is flaky. We need to investigate why the child overlay
-        // is not staying shown after the parent overlay is hidden. The failing line
-        // is highlighted below.
-        it.skip('on [Escape] press in child overlay: parent hides, child stays shown', async () => {
+        it('on [Escape] press in child overlay: parent hides, child stays shown', async () => {
           const parentContent = /** @type {HTMLDivElement} */ (
             await fixture(
               html` <!-- -->
@@ -877,12 +978,16 @@ describe('OverlayController', () => {
           );
           const { parentOverlay, childOverlay } = await createNestedEscControllers(parentContent);
           await mimicEscapePress(childOverlay.contentNode);
-          await waitUntil(() => !parentOverlay.isShown);
-
-          // TODO: This is the failing line ("sometimes").
-          // The child overlay is not staying shown after the parent overlay is hidden.
-          await waitUntil(() => childOverlay.isShown);
-
+          await childOverlay._showComplete;
+          await parentOverlay._showComplete;
+          await childOverlay._hideComplete;
+          await parentOverlay._hideComplete;
+          if (!childOverlay.isShown) {
+            await waitUntil(() => childOverlay.isShown);
+          }
+          if (parentOverlay.isShown) {
+            await waitUntil(() => !parentOverlay.isShown);
+          }
           await childOverlay.teardown();
           await parentOverlay.teardown();
         });
@@ -988,6 +1093,7 @@ describe('OverlayController', () => {
         });
       });
     });
+
     describe('hidesOnOutsideClick', () => {
       it('hides on outside click', async () => {
         const contentNode = /** @type {HTMLElement} */ (await fixture('<div>Content</div>'));
@@ -1708,6 +1814,97 @@ describe('OverlayController', () => {
         expect(ctrl1.hasActiveBackdrop).to.be.true;
       });
     });
+
+    describe('elementToFocusOnShow', () => {
+      it('adds tabindex="-1" to the content node when elementToFocusOnShow is true', async () => {
+        const ctrl = new OverlayController({
+          ...withGlobalTestConfig(),
+          isBlocking: false,
+          elementToFocusOnShow: true,
+        });
+        const contentNode = /** @type {HTMLElement} */ (await fixture('<div>Content</div>'));
+        ctrl.updateConfig({ contentNode });
+        await ctrl.show();
+        expect(contentNode.getAttribute('tabindex')).to.equal('-1');
+      });
+
+      it('makes contentNode the root of "next tab flow"', async () => {
+        const ctrl = new OverlayController({
+          ...withGlobalTestConfig(),
+          isBlocking: false,
+          elementToFocusOnShow: true,
+        });
+        const contentNode = /** @type {HTMLElement} */ (
+          await fixture('<div><button>Button</button></div>')
+        );
+        ctrl.updateConfig({ contentNode });
+        await ctrl.show();
+        const button = /** @type {HTMLButtonElement} */ (contentNode.querySelector('button'));
+        button.focus();
+        expect(isActiveElement(button)).to.be.true;
+      });
+    });
+
+    describe('syncChildrenCloseState', () => {
+      it('does not close all children of nested controllers when syncChildrenCloseState is false', async () => {
+        const parentContent = /** @type {HTMLDivElement} */ (
+          await fixture(
+            html` <!-- -->
+              <div data-sync-children-close-state id="parent-overlay">
+                <div id="child-overlay">we open our child and it will close when parent does</div>
+              </div>`,
+          )
+        );
+        const { parentOverlay, childOverlay } = await createNestedEscControllers(parentContent);
+        expect(parentOverlay.isShown).to.be.true;
+        expect(childOverlay.isShown).to.be.true;
+
+        await parentOverlay.hide();
+        await childOverlay._hideComplete;
+        expect(parentOverlay.isShown).to.be.false;
+        expect(childOverlay.isShown).to.be.false;
+      });
+
+      it('does not close all children of nested controllers when syncChildrenCloseState is false', async () => {
+        const parentContent = /** @type {HTMLDivElement} */ (
+          await fixture(
+            html` <!-- -->
+              <div id="parent-overlay">
+                <div id="child-overlay">
+                  we open our child and it will not close when parent does
+                </div>
+              </div>`,
+          )
+        );
+        const { parentOverlay, childOverlay } = await createNestedEscControllers(parentContent);
+        expect(parentOverlay.isShown).to.be.true;
+        expect(childOverlay.isShown).to.be.true;
+
+        await parentOverlay.hide();
+        expect(parentOverlay.isShown).to.be.false;
+        expect(childOverlay.isShown).to.be.true;
+      });
+    });
+
+    describe('isActivated', () => {
+      it('allows to conditionally disable overlay/openable functionality (for responsive context like nav menus, accordions/collapsibles vs plain headings/content etc.)', async () => {
+        const ctrl = new OverlayController({
+          ...withGlobalTestConfig(),
+          isActivated: false,
+        });
+        expect(ctrl.__hasSetup).to.be.false;
+        ctrl.updateConfig({
+          isActivated: true,
+        });
+        expect(ctrl.__hasSetup).to.be.true;
+      });
+    });
+
+    // TODO
+    describe('hideVisually', () => {});
+
+    // TODO
+    describe('requireConnectedNodes', () => {});
   });
 
   describe('Show / Hide / Toggle', () => {
@@ -2298,6 +2495,7 @@ describe('OverlayController', () => {
     });
 
     it('should run with scroll prevention', async () => {
+      await overlayControllerPreventsScroll.hide();
       await overlayControllerPreventsScroll.show();
 
       expect(

package/components/overlays/test/local-positioning.test.js

@@ -61,8 +61,10 @@ describe('Local Positioning', () => {
         ...withLocalTestConfig(),
       });
       await ctrl.show();
+      // @ts-ignore [popper-instance-access-in-test]
       expect(ctrl._popper.state.modifiersData).to.exist;
       await ctrl.hide();
+      // @ts-ignore [popper-instance-access-in-test]
       expect(ctrl._popper.state.modifiersData).to.exist;
     });
 
@@ -203,6 +205,7 @@ describe('Local Positioning', () => {
       `);
 
       await ctrl.show();
+      // @ts-ignore [popper-instance-access-in-test]
       expect(ctrl._popper.state.modifiersData.offset.auto).to.eql({ x: 0, y: 16 });
     });
 
@@ -296,6 +299,7 @@ describe('Local Positioning', () => {
         },
       });
       await ctrl.show();
+      // @ts-ignore [popper-instance-access-in-test]
       expect(ctrl._popper.options.modifiers.offset.offset).to.equal('0, 20px');
       expect(normalizeTransformStyle(ctrl.contentWrapperNode.style.transform)).to.equal(
         'translate3d(10px, -40px, 0px)',

package/components/overlays/test-suites/OverlayMixin.suite.js

@@ -366,13 +366,16 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
       `)
       );
       await OverlayController.popperModule;
+      // @ts-ignore [popper-instance-access-in-test]
       sinon.spy(el._overlayCtrl._popper, 'update');
       el.repositionOverlay();
+      // @ts-ignore [popper-instance-access-in-test]
       expect(el._overlayCtrl._popper.update).to.have.been.been.calledOnce;
 
       if (!el._overlayCtrl.isTooltip) {
         el.config = { ...el.config, placementMode: 'global' };
         el.repositionOverlay();
+        // @ts-ignore [popper-instance-access-in-test]
         expect(el._overlayCtrl._popper.update).to.have.been.been.calledOnce;
       }
     });
@@ -459,11 +462,11 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
 
       const dialogEl = /** @type {HTMLDialogElement} */ (el._overlayCtrl.__wrappingDialogNode);
 
-      // @ts-expect-error [allow-protected-in-tests]
+      // @ts-ignore [checkVisibility lives on the polyfilled dialog]
       expect(dialogEl.checkVisibility()).to.be.true;
       // @ts-expect-error [allow-protected-in-tests]
       await mimicEscapePress(el._overlayContentNode);
-      // @ts-expect-error [allow-protected-in-tests]
+      // @ts-ignore [checkVisibility lives on the polyfilled dialog]
       expect(dialogEl.checkVisibility()).to.be.true;
     });
 
@@ -537,13 +540,13 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
       it('works with cache directive when reconnected', async () => {
         class CachingContext extends LitElement {
           static properties = {
-            switched: { type: Boolean },
+            showOverlay: { type: Boolean },
           };
 
           constructor() {
             super();
 
-            this.switched = false;
+            this.showOverlay = true;
           }
 
           get overlayEl() {
@@ -552,12 +555,12 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
 
           render() {
             return html`${cache(
-              this.switched
-                ? html`something else`
-                : html`<${tag} id="myOverlay">
+              this.showOverlay
+                ? html`<${tag} id="myOverlay">
               <div slot="content">content b</div>
               <button slot="invoker">invoker button b</button>
-            </${tag}>`,
+            </${tag}>`
+                : html`something else`,
             )}`;
           }
         }
@@ -578,7 +581,7 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
         // @ts-expect-error [allow-protected] in tests
         const setupSpy = sinon.spy(el.overlayEl, '_setupOverlayCtrl');
 
-        el.switched = true;
+        el.showOverlay = false;
         // render the new content
         await el.updateComplete;
         // wait for the teardown to complete
@@ -588,7 +591,7 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
         expect(teardownSpy.callCount).to.equal(1);
         expect(setupSpy.callCount).to.equal(0);
 
-        el.switched = false;
+        el.showOverlay = true;
         await el.updateComplete;
         expect(setupSpy.callCount).to.equal(1);
 

package/components/overlays/types/OverlayConfig.ts

@@ -21,7 +21,6 @@ export type OverlayPhase =
   | 'add'
   | 'remove';
 
-
 export interface ViewportConfig {
   placement: ViewportPlacement;
 }
@@ -97,14 +96,30 @@ export interface OverlayConfig {
   /** By default, the tooltip content is a 'description' for the invoker (uses aria-describedby) Setting this property to 'label' makes the content function as a label (via aria-labelledby) */
   invokerRelation?: 'label' | 'description';
 
-  /** render a div instead of dialog */
-  _noDialogEl?: Boolean;
-
   /**
    * Determines the conditions hiding/showing should be based on. It gets the OverlayController as input and returns an object with
    * functions with Overlay phases as keys
    */
   visibilityTriggerFunction?: Function;
-}
 
+  /**
+   * Whether the overlay content should receive focus when shown.
+   */
+  elementToFocusOnShow?: boolean;
+
+  /*
+   * By default, we function either as overlay or disclosure. In some cases, this should be dynamically set (think of responsive changes).
+   * or it depends on the context (a top level menu is not openable (unless it's a context menu), its children menus are).
+   */
+  isActivated?: boolean;
+
+  /**
+   * By default, an error is thrown when contentNode is not connected to the DOM.
+   * This allows to prepare nodes and later connect them to dom.
+   */
+  requireConnectedNodes?: boolean;
+
+  syncChildrenCloseState?: boolean;
 
+  _shouldTeardownDomStructure?: boolean;
+}

package/components/overlays/types/OverlayMixinTypes.ts

@@ -17,6 +17,8 @@ export interface DefineOverlayConfig {
 }
 
 export declare class OverlayHost {
+  static _getFocusableInvokerEl(focusableElOrWrapper: Element | null | undefined): Element | null;
+
   opened: Boolean;
   get config(): Partial<OverlayConfig>;
   set config(value: Partial<OverlayConfig>);

package/components/pagination/src/LionPagination.js

@@ -116,9 +116,11 @@ export class LionPagination extends LocalizeMixin(LitElement) {
     return this.__current || 0;
   }
 
+  /** @private */
+  __visiblePages;
+
   constructor() {
     super();
-    /** @private */
     this.__visiblePages = 5;
     this.current = 1;
     this.count = 0;

package/components/progress-indicator/src/LionProgressIndicator.js

@@ -90,7 +90,6 @@ export class LionProgressIndicator extends LocalizeMixin(LitElement) {
   }
 
   /**
-   * @readonly
    * @type {boolean}
    */
   get indeterminate() {

package/components/select/src/LionSelect.js

@@ -98,7 +98,9 @@ export class LionSelect extends LionFieldWithSelect {
     }
 
     if (changedProperties.has('autocomplete')) {
-      this._inputNode.autocomplete = /** @type {string} */ (this.autocomplete);
+      // the DOM lib types `autocomplete` as `AutoFill` only in newer TypeScript;
+      // cast keeps this valid on both compilers without widening the public type
+      this._inputNode.autocomplete = /** @type {any} */ (this.autocomplete);
     }
   }
 

package/components/select-rich/src/LionSelectRich.js

@@ -28,6 +28,7 @@ function detectInteractionMode() {
 export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(LionListbox))) {
   static get scopedElements() {
     return {
+      // @ts-ignore [ts7-2855] TS7 rejects field access via super (the parent declares this as a field). Dot form kept deliberately: bracket access is exempt from property mangling (terser keep_quoted), which could split this property into two names. Upstream fix: declare an accessor in the parent type
       ...super.scopedElements,
       'lion-select-invoker': LionSelectInvoker,
     };
@@ -91,7 +92,6 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
    * @protected
    * @configure FocusMixin
    */
-  // @ts-ignore
   get _focusableNode() {
     return this._invokerNode;
   }
@@ -108,6 +108,21 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
     );
   }
 
+  /**
+   * @configure ListboxMixin
+   * @param {HTMLElement} el
+   * @param {HTMLElement} [scrollTargetEl]
+   * @protected
+   */
+  _scrollIntoView(el, scrollTargetEl) {
+    if (this.opened) {
+      super._scrollIntoView(el, scrollTargetEl);
+    }
+  }
+
+  /** @protected */
+  _arrowWidth;
+
   constructor() {
     super();
 
@@ -125,7 +140,6 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
     this.interactionMode = 'auto';
 
     this.singleOption = false;
-    /** @protected */
     this._arrowWidth = 28;
 
     /** @private */
@@ -428,6 +442,10 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
   _teardownOverlayCtrl() {
     super._teardownOverlayCtrl();
 
+    if (!this._overlayCtrl) {
+      return;
+    }
+
     this._overlayCtrl.removeEventListener('show', this.__overlayOnShow);
     this._overlayCtrl.removeEventListener('before-show', this.__overlayBeforeShow);
     this._overlayCtrl.removeEventListener('hide', this.__overlayOnHide);
@@ -499,6 +517,7 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
       return;
     }
 
+    // @ts-ignore [ts7-2565] TS7 checks definite assignment on this inferred field; Lit reactive property: read through a typed local instead (e.g. const next = this.x ?? DEFAULT) - a class field would shadow the accessor Lit creates from static properties
     if (this.opened) {
       return;
     }

package/components/select-rich/test/lion-select-rich-interaction.test.js

@@ -2,6 +2,7 @@ import { expect, triggerBlurFor, triggerFocusFor, fixture } from '@open-wc/testi
 import { Required } from '@lion/ui/form-core.js';
 import { html } from 'lit/static-html.js';
 import { browserDetection } from '@lion/ui/core.js';
+import sinon from 'sinon';
 
 import '@lion/ui/define/lion-option.js';
 
@@ -43,6 +44,58 @@ function expectOnlyGivenOneOptionToBeChecked(options, selectedIndex) {
 }
 
 describe('lion-select-rich interactions', () => {
+  describe('Scrolling active options', () => {
+    afterEach(() => {
+      sinon.restore();
+    });
+
+    it('does not scroll while typing a selection from the closed invoker', async () => {
+      const el = /** @type {LionSelectRich} */ (
+        await fixture(html`
+          <lion-select-rich interaction-mode="windows/linux">
+            <lion-option .choiceValue=${'red'}>Red</lion-option>
+            <lion-option .choiceValue=${'teal'}>Teal</lion-option>
+          </lion-select-rich>
+        `)
+      );
+      const scrollSpy = sinon.spy(Element.prototype, 'scrollIntoView');
+
+      mimicKeyPress(el, 't', 'KeyT');
+      await el.updateComplete;
+
+      expect(el.opened).to.be.false;
+      expect(el.checkedIndex).to.equal(1);
+      expect(scrollSpy.callCount).to.equal(0);
+    });
+
+    it('scrolls the selected option on opening and the active option on keyboard navigation', async () => {
+      const el = /** @type {LionSelectRich} */ (
+        await fixture(html`
+          <lion-select-rich interaction-mode="mac">
+            <lion-option .choiceValue=${10}>Item 1</lion-option>
+            <lion-option .choiceValue=${20} checked>Item 2</lion-option>
+            <lion-option .choiceValue=${30}>Item 3</lion-option>
+          </lion-select-rich>
+        `)
+      );
+      const { _overlayCtrl, _listboxNode } = getSelectRichMembers(el);
+      const scrollSpy = sinon.spy(Element.prototype, 'scrollIntoView');
+
+      await _overlayCtrl.show();
+      await el.updateComplete;
+
+      expect(el.opened).to.be.true;
+      expect(scrollSpy.calledOn(el.formElements[1])).to.be.true;
+      scrollSpy.resetHistory();
+
+      mimicKeyPress(_listboxNode, 'ArrowDown');
+      await el.updateComplete;
+
+      expect(el.activeIndex).to.equal(2);
+      expect(scrollSpy.calledOn(el.formElements[2])).to.be.true;
+    });
+  });
+
   describe('Interaction mode', () => {
     it('autodetects interactionMode if not defined', async () => {
       const originalIsMac = browserDetection.isMac;