fix: tooltip causing page overflow

fix #991
muxinc · Oct 1, 2024 · 4cf5eee · 4cf5eee
1 parent 3ccc78b
commit 4cf5eee
Showing 1 changed file with 10 additions and 13 deletions.
diff --git a/src/js/media-chrome-button.ts b/src/js/media-chrome-button.ts
@@ -1,10 +1,6 @@
 import { MediaStateReceiverAttributes } from './constants.js';
 import MediaTooltip, { TooltipPlacement } from './media-tooltip.js';
-import {
-  getOrInsertCSSRule,
-  getStringAttr,
-  setStringAttr,
-} from './utils/element-utils.js';
+import { getOrInsertCSSRule, getStringAttr, setStringAttr } from './utils/element-utils.js';
 import { globalThis, document } from './utils/server-safe-globals.js';
 
 const Attributes = {
@@ -86,7 +82,8 @@ template.innerHTML = /*html*/ `
   }
 </style>
 
-<slot name="tooltip">
+${/** Make sure unpositioned tooltip doesn't cause page overflow (scroll). */ ''}
+<slot name="tooltip" hidden>
   <media-tooltip>
     <slot name="tooltip-content"></slot>
   </media-tooltip>
@@ -125,6 +122,7 @@ template.innerHTML = /*html*/ `
  */
 class MediaChromeButton extends globalThis.HTMLElement {
   #mediaController;
+  #tooltipSlot: HTMLSlotElement;
   preventClick = false;
   nativeEl: DocumentFragment;
   tooltipEl: MediaTooltip = null;
@@ -173,6 +171,7 @@ class MediaChromeButton extends globalThis.HTMLElement {
       this.shadowRoot.appendChild(buttonHTML);
     }
 
+    this.#tooltipSlot = this.shadowRoot.querySelector('slot[name="tooltip"]');
     this.tooltipEl = this.shadowRoot.querySelector('media-tooltip');
   }
 
@@ -187,10 +186,12 @@ class MediaChromeButton extends globalThis.HTMLElement {
   };
 
   #positionTooltip = () => {
+    this.#tooltipSlot.hidden = false;
+
     // Conditional chaining accounts for scenarios
     // where the tooltip element isn't yet defined.
     this.tooltipEl?.updateXOffset?.();
-  }
+  };
 
   // NOTE: There are definitely some "false positive" cases with multi-key pressing,
   // but this should be good enough for most use cases.
@@ -273,19 +274,15 @@ class MediaChromeButton extends globalThis.HTMLElement {
 
     this.setAttribute('role', 'button');
 
-    const mediaControllerId = this.getAttribute(
-      MediaStateReceiverAttributes.MEDIA_CONTROLLER
-    );
+    const mediaControllerId = this.getAttribute(MediaStateReceiverAttributes.MEDIA_CONTROLLER);
     if (mediaControllerId) {
       this.#mediaController =
         // @ts-ignore
         this.getRootNode()?.getElementById(mediaControllerId);
       this.#mediaController?.associateElement?.(this);
     }
 
-    globalThis.customElements
-      .whenDefined('media-tooltip')
-      .then(() => this.#setupTooltip());
+    globalThis.customElements.whenDefined('media-tooltip').then(() => this.#setupTooltip());
   }
 
   // Called when we know the tooltip is ready / defined