fix: position menu absolute in control bar (#966)

to prevent taking space
muxinc · Sep 11, 2024 · 3dbd3ff · 3dbd3ff
1 parent cfa066c
commit 3dbd3ff
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 3 deletions.
diff --git a/examples/vanilla/control-elements/media-captions-menu.html b/examples/vanilla/control-elements/media-captions-menu.html
@@ -46,7 +46,6 @@ <h1>Captions Menu</h1>
           <track label="Subs Russian" kind="subtitles" srclang="ru" src="../vtt/elephantsdream/captions.ru.vtt"></track>
           <track label="Subs Arabic" kind="subtitles" srclang="ar" src="../vtt/elephantsdream/captions.ar.vtt"></track>
         </video>
-        <media-captions-menu anchor="auto" hidden></media-captions-menu>
         <media-control-bar>
           <media-play-button></media-play-button>
           <media-seek-backward-button seekoffset="15"></media-seek-backward-button>
@@ -55,6 +54,7 @@ <h1>Captions Menu</h1>
           <media-time-range></media-time-range>
           <media-time-display showduration remaining></media-time-display>
           <media-captions-button></media-captions-button>
+          <media-captions-menu anchor="auto" hidden></media-captions-menu>
           <media-captions-menu-button></media-captions-menu-button>
           <media-fullscreen-button></media-fullscreen-button>
         </media-control-bar>

diff --git a/src/js/media-control-bar.ts b/src/js/media-control-bar.ts
@@ -28,6 +28,10 @@ template.innerHTML = /*html*/ `
     ::slotted(media-clip-selector) {
       flex-grow: 1;
     }
+
+    ::slotted([role="menu"]) {
+      position: absolute;
+    }
   </style>
 
   <slot></slot>

diff --git a/src/js/menu/media-chrome-menu.ts b/src/js/menu/media-chrome-menu.ts
@@ -307,8 +307,6 @@ class MediaChromeMenu extends globalThis.HTMLElement {
   #mediaController: MediaController | null = null;
   #previouslyFocused: HTMLElement | null = null;
   #invokerElement: HTMLElement | null = null;
-  #keysSoFar = '';
-  #clearKeysTimeout: number | null = null;
   #previousItems = new Set<MediaChromeMenuItem>();
   #mutationObserver: MutationObserver;
   #isPopover = false;