diff --git a/src/routes/Player/AudioMenu/AudioMenu.tsx b/src/routes/Player/AudioMenu/AudioMenu.tsx
index 1a84b28da..71bdb68ed 100644
--- a/src/routes/Player/AudioMenu/AudioMenu.tsx
+++ b/src/routes/Player/AudioMenu/AudioMenu.tsx
@@ -14,15 +14,16 @@ type Props = {
const AudioMenu = ({ className, selectedAudioTrackId, audioTracks, onAudioTrackSelected }: Props) => {
const { t } = useTranslation();
- const onMouseDown = (event: MouseEvent) => {
- event.stopPropagation();
- };
-
const onAudioTrackClick = useCallback(({ currentTarget }: MouseEvent) => {
const id = currentTarget.getAttribute('data-id')!;
onAudioTrackSelected && onAudioTrackSelected(id);
}, [onAudioTrackSelected]);
+ const onMouseDown = (event: MouseEvent) => {
+ // @ts-expect-error: Property 'audioMenuClosePrevented' does not exist on type 'MouseEvent'.
+ event.nativeEvent.audioMenuClosePrevented = true;
+ };
+
return (
diff --git a/src/routes/Player/ControlBar/ControlBar.js b/src/routes/Player/ControlBar/ControlBar.js
index 77b483f9b..ca9498320 100644
--- a/src/routes/Player/ControlBar/ControlBar.js
+++ b/src/routes/Player/ControlBar/ControlBar.js
@@ -50,7 +50,7 @@ const ControlBar = ({
event.nativeEvent.subtitlesMenuClosePrevented = true;
}, []);
const onAudioButtonMouseDown = React.useCallback((event) => {
- event.stopPropagation();
+ event.nativeEvent.audioMenuClosePrevented = true;
}, []);
const onInfoButtonMouseDown = React.useCallback((event) => {
event.nativeEvent.infoMenuClosePrevented = true;
diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index 26194a9b0..d201af0fa 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -240,7 +240,9 @@ const Player = ({ urlParams, queryParams }) => {
if (!event.nativeEvent.subtitlesMenuClosePrevented) {
closeSubtitlesMenu();
}
- closeAudioMenu();
+ if (!event.nativeEvent.audioMenuClosePrevented) {
+ closeAudioMenu();
+ }
if (!event.nativeEvent.infoMenuClosePrevented) {
closeInfoMenu();
}