From ef129d763f966a9f255fb3a35b6150aecace869f Mon Sep 17 00:00:00 2001
From: amtins <andre.martins@rts.ch>
Date: Sun, 14 Apr 2024 18:28:31 +0200
Subject: [PATCH] fix(playback-rate-menu-button): ensure proper menu behavior
 on double click

When the playback rate button is clicked twice, the menu does not close. This
has an impact when a developer has disabled menu display on mouse-over, forcing
the user to click elsewhere to close the menu.

- moves the `label` inside the button
- deletes function `createEl`
---
 .../playback-rate-menu-button.js              | 29 +++++--------------
 1 file changed, 7 insertions(+), 22 deletions(-)

diff --git a/src/js/control-bar/playback-rate-menu/playback-rate-menu-button.js b/src/js/control-bar/playback-rate-menu/playback-rate-menu-button.js
index 484aca62cb..f2c4eeed5b 100644
--- a/src/js/control-bar/playback-rate-menu/playback-rate-menu-button.js
+++ b/src/js/control-bar/playback-rate-menu/playback-rate-menu-button.js
@@ -25,36 +25,21 @@ class PlaybackRateMenuButton extends MenuButton {
   constructor(player, options) {
     super(player, options);
 
-    this.menuButton_.el_.setAttribute('aria-describedby', this.labelElId_);
-
-    this.updateVisibility();
-    this.updateLabel();
-
-    this.on(player, 'loadstart', (e) => this.updateVisibility(e));
-    this.on(player, 'ratechange', (e) => this.updateLabel(e));
-    this.on(player, 'playbackrateschange', (e) => this.handlePlaybackRateschange(e));
-  }
-
-  /**
-   * Create the `Component`'s DOM element
-   *
-   * @return {Element}
-   *         The element that was created.
-   */
-  createEl() {
-    const el = super.createEl();
-
     this.labelElId_ = 'vjs-playback-rate-value-label-' + this.id_;
-
     this.labelEl_ = Dom.createEl('div', {
       className: 'vjs-playback-rate-value',
       id: this.labelElId_,
       textContent: '1x'
     });
+    this.menuButton_.el_.appendChild(this.labelEl_);
+    this.menuButton_.el_.setAttribute('aria-describedby', this.labelElId_);
 
-    el.appendChild(this.labelEl_);
+    this.updateVisibility();
+    this.updateLabel();
 
-    return el;
+    this.on(player, 'loadstart', (e) => this.updateVisibility(e));
+    this.on(player, 'ratechange', (e) => this.updateLabel(e));
+    this.on(player, 'playbackrateschange', (e) => this.handlePlaybackRateschange(e));
   }
 
   dispose() {