fix: fix map container

sbb-design-systems · Dec 18, 2024 · 5a6f71a · 5a6f71a
1 parent 2d52b8e
commit 5a6f71a
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 19 deletions.
diff --git a/src/elements/map-container/map-container.ts b/src/elements/map-container/map-container.ts
@@ -5,6 +5,7 @@ import { customElement, property, state } from 'lit/decorators.js';
 
 import { SbbLanguageController } from '../core/controllers.js';
 import { forceType } from '../core/decorators.js';
+import { forwardEventToHost } from '../core/eventing.js';
 import { i18nMapContainerButtonLabel } from '../core/i18n.js';
 
 import style from './map-container.scss?lit&inline';
@@ -96,7 +97,10 @@ class SbbMapContainerElement extends LitElement {
         <div class="sbb-map-container__map">
           <slot name="map"></slot>
         </div>
-        <div class="sbb-map-container__sidebar">
+        <div
+          class="sbb-map-container__sidebar"
+          @scroll=${(e: Event) => forwardEventToHost(e, document)}
+        >
           <span id="intersector"></span>
 
           <slot></slot>

diff --git a/src/elements/map-container/map-container.visual.spec.ts b/src/elements/map-container/map-container.visual.spec.ts
@@ -1,15 +1,17 @@
+import { aTimeout } from '@open-wc/testing';
 import { html, nothing, type TemplateResult } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import { describeViewports, visualDiffDefault } from '../core/testing/private.js';
 
 import './map-container.js';
+import '../menu.js';
 import '../header.js';
 import '../title.js';
 import '../logo.js';
 
 describe(`sbb-map-container`, () => {
-  const template = (stickyOffset = false): TemplateResult => html`
+  const template = (stickyOffset = false, sidebarContent?: TemplateResult): TemplateResult => html`
     <sbb-header expanded>
       <sbb-header-button icon-name="hamburger-menu-small" expand-from="small">
         Menu
@@ -25,23 +27,25 @@ describe(`sbb-map-container`, () => {
       <!-- Content slot -->
       <div style="padding: var(--sbb-spacing-fixed-4x)">
         <sbb-title level="4">Operations & Disruptions</sbb-title>
-        ${[...Array(5).keys()].map(
-          (value) => html`
-            <div
-              style=${styleMap({
-                'background-color': 'var(--sbb-color-milk)',
-                height: '116px',
-                display: 'flex',
-                'align-items': 'center',
-                'justify-content': 'center',
-                'border-radius': 'var(--sbb-border-radius-4x)',
-                'margin-block-end': 'var(--sbb-spacing-fixed-4x)',
-              })}
-            >
-              <p>Situation ${value}</p>
-            </div>
-          `,
-        )}
+        ${sidebarContent
+          ? sidebarContent
+          : [...Array(5).keys()].map(
+              (value) => html`
+                <div
+                  style=${styleMap({
+                    'background-color': 'var(--sbb-color-milk)',
+                    height: '116px',
+                    display: 'flex',
+                    'align-items': 'center',
+                    'justify-content': 'center',
+                    'border-radius': 'var(--sbb-border-radius-4x)',
+                    'margin-block-end': 'var(--sbb-spacing-fixed-4x)',
+                  })}
+                >
+                  <p>Situation ${value}</p>
+                </div>
+              `,
+            )}
       </div>
 
       <div slot="map" style="height: 100%">
@@ -95,4 +99,49 @@ describe(`sbb-map-container`, () => {
       }),
     );
   });
+
+  describeViewports({ viewports: ['medium'], viewportHeight: 400 }, () => {
+    it(
+      `with scrolled menu`,
+      visualDiffDefault.with(async (setup) => {
+        await setup.withFixture(
+          template(
+            true,
+            html`
+              <p>Content</p>
+              <p>Content</p>
+              <p>Content</p>
+              <button id="menu-trigger">Content</button>
+              <sbb-menu trigger="menu-trigger">
+                <sbb-menu-button>Element 1</sbb-menu-button>
+                <sbb-menu-button>Element 2</sbb-menu-button>
+                <sbb-menu-button>Element 3</sbb-menu-button>
+              </sbb-menu>
+              <p>Content</p>
+              <p>Content</p>
+              <p>Content</p>
+              <p>Content</p>
+              <p>Content</p>
+              <p>Content</p>
+            `,
+          ),
+        );
+
+        setup.withSnapshotElement(setup.snapshotElement.querySelector('sbb-map-container')!);
+
+        const scrollContext = setup.snapshotElement.shadowRoot!.querySelector(
+          '.sbb-map-container__sidebar',
+        )!;
+        const menu = setup.snapshotElement.querySelector('sbb-menu')!;
+
+        setup.withPostSetupAction(async () => {
+          menu.open();
+          scrollContext.scrollTo(0, 100);
+
+          // We need to ensure content resizing kicked in
+          await aTimeout(40);
+        });
+      }),
+    );
+  });
 });
diff --git a/src/elements/menu/menu/menu.ts b/src/elements/menu/menu/menu.ts
@@ -23,6 +23,7 @@ import {
   isZeroAnimationDuration,
   SbbScrollHandler,
 } from '../../core/dom.js';
+import { forwardEventToHost } from '../../core/eventing.js';
 import { SbbNamedSlotListMixin } from '../../core/mixins.js';
 import {
   getElementPosition,
@@ -414,6 +415,7 @@ class SbbMenuElement extends SbbNamedSlotListMixin<
         >
           <div
             @click=${(event: Event) => this._closeOnInteractiveElementClick(event)}
+            @scroll=${(e: Event) => forwardEventToHost(e, document)}
             class="sbb-menu__content"
           >
             ${this.listChildren.length