fix: custom autofocus impl for prompt

assets/translations/README.md

@@ -17,14 +17,14 @@ To submit or edit a translation, please follow [this guide](../../contributing.m
 |   | Locale | Translated keys | Based on |
 | :----: | ------ | --------------- | :------: |
 |  | [`en-US`](./en-US.json) | `328` (default locale) |  |
-| ⚠ | [`de-DE`](./de-DE.json) | `327/328` (99.7%) | ─ |
+| ⚠ | [`de-DE`](./de-DE.json) | `325/328` (99.1%) | ─ |
 |  | [`en-GB`](./en-GB.json) | `328/328` (100%) | `en-US` |
-| ⚠ | [`es-ES`](./es-ES.json) | `324/328` (98.8%) | ─ |
-| ⚠ | [`fr-FR`](./fr-FR.json) | `324/328` (98.8%) | ─ |
-| ⚠ | [`hi-IN`](./hi-IN.json) | `324/328` (98.8%) | ─ |
-| ⚠ | [`ja-JP`](./ja-JP.json) | `324/328` (98.8%) | ─ |
-| ⚠ | [`pt-BR`](./pt-BR.json) | `324/328` (98.8%) | ─ |
-| ⚠ | [`zh-CN`](./zh-CN.json) | `324/328` (98.8%) | ─ |
+| ⚠ | [`es-ES`](./es-ES.json) | `322/328` (98.2%) | ─ |
+| ⚠ | [`fr-FR`](./fr-FR.json) | `322/328` (98.2%) | ─ |
+| ⚠ | [`hi-IN`](./hi-IN.json) | `322/328` (98.2%) | ─ |
+| ⚠ | [`ja-JP`](./ja-JP.json) | `322/328` (98.2%) | ─ |
+| ⚠ | [`pt-BR`](./pt-BR.json) | `322/328` (98.2%) | ─ |
+| ⚠ | [`zh-CN`](./zh-CN.json) | `322/328` (98.2%) | ─ |
 
 <sub>
 ✅ - Fully translated
@@ -45,74 +45,88 @@ This means to figure out which keys are untranslated, you will need to manually
 
 ### Missing keys:
 
-<details><summary><code>de-DE</code> - 1 missing key <i>(click to show)</i></summary><br>
+<details><summary><code>de-DE</code> - 3 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
 | `reset_everything_confirm` | `Do you really want to reset all stored data to the default values?\nThe page will be automatically reloaded.` |
+| `open_current_lyrics` | `Open the current song's lyrics in a new tab - shift-click to open in a new window or ctrl-click to open manual search` |
+| `open_lyrics` | `Open this song's lyrics in a new tab - ctrl-click to open manual search` |
 
 <br></details>
 
-<details><summary><code>es-ES</code> - 4 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>es-ES</code> - 6 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
 | `reset_everything_confirm` | `Do you really want to reset all stored data to the default values?\nThe page will be automatically reloaded.` |
+| `open_current_lyrics` | `Open the current song's lyrics in a new tab - shift-click to open in a new window or ctrl-click to open manual search` |
+| `open_lyrics` | `Open this song's lyrics in a new tab - ctrl-click to open manual search` |
 | `feature_desc_resetEverything` | `Reset all stored data to the default values` |
 | `feature_btn_resetEverything` | `Reset everything` |
 | `feature_btn_resetEverything_running` | `Resetting...` |
 
 <br></details>
 
-<details><summary><code>fr-FR</code> - 4 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>fr-FR</code> - 6 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
 | `reset_everything_confirm` | `Do you really want to reset all stored data to the default values?\nThe page will be automatically reloaded.` |
+| `open_current_lyrics` | `Open the current song's lyrics in a new tab - shift-click to open in a new window or ctrl-click to open manual search` |
+| `open_lyrics` | `Open this song's lyrics in a new tab - ctrl-click to open manual search` |
 | `feature_desc_resetEverything` | `Reset all stored data to the default values` |
 | `feature_btn_resetEverything` | `Reset everything` |
 | `feature_btn_resetEverything_running` | `Resetting...` |
 
 <br></details>
 
-<details><summary><code>hi-IN</code> - 4 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>hi-IN</code> - 6 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
 | `reset_everything_confirm` | `Do you really want to reset all stored data to the default values?\nThe page will be automatically reloaded.` |
+| `open_current_lyrics` | `Open the current song's lyrics in a new tab - shift-click to open in a new window or ctrl-click to open manual search` |
+| `open_lyrics` | `Open this song's lyrics in a new tab - ctrl-click to open manual search` |
 | `feature_desc_resetEverything` | `Reset all stored data to the default values` |
 | `feature_btn_resetEverything` | `Reset everything` |
 | `feature_btn_resetEverything_running` | `Resetting...` |
 
 <br></details>
 
-<details><summary><code>ja-JP</code> - 4 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>ja-JP</code> - 6 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
 | `reset_everything_confirm` | `Do you really want to reset all stored data to the default values?\nThe page will be automatically reloaded.` |
+| `open_current_lyrics` | `Open the current song's lyrics in a new tab - shift-click to open in a new window or ctrl-click to open manual search` |
+| `open_lyrics` | `Open this song's lyrics in a new tab - ctrl-click to open manual search` |
 | `feature_desc_resetEverything` | `Reset all stored data to the default values` |
 | `feature_btn_resetEverything` | `Reset everything` |
 | `feature_btn_resetEverything_running` | `Resetting...` |
 
 <br></details>
 
-<details><summary><code>pt-BR</code> - 4 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>pt-BR</code> - 6 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
 | `reset_everything_confirm` | `Do you really want to reset all stored data to the default values?\nThe page will be automatically reloaded.` |
+| `open_current_lyrics` | `Open the current song's lyrics in a new tab - shift-click to open in a new window or ctrl-click to open manual search` |
+| `open_lyrics` | `Open this song's lyrics in a new tab - ctrl-click to open manual search` |
 | `feature_desc_resetEverything` | `Reset all stored data to the default values` |
 | `feature_btn_resetEverything` | `Reset everything` |
 | `feature_btn_resetEverything_running` | `Resetting...` |
 
 <br></details>
 
-<details><summary><code>zh-CN</code> - 4 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>zh-CN</code> - 6 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
 | `reset_everything_confirm` | `Do you really want to reset all stored data to the default values?\nThe page will be automatically reloaded.` |
+| `open_current_lyrics` | `Open the current song's lyrics in a new tab - shift-click to open in a new window or ctrl-click to open manual search` |
+| `open_lyrics` | `Open this song's lyrics in a new tab - ctrl-click to open manual search` |
 | `feature_desc_resetEverything` | `Reset all stored data to the default values` |
 | `feature_btn_resetEverything` | `Reset everything` |
 | `feature_btn_resetEverything_running` | `Resetting...` |

src/dialogs/prompt.ts

@@ -61,6 +61,8 @@ class PromptDialog extends BytmDialog {
       renderBody: () => this.renderBody(props),
       renderFooter: () => this.renderFooter(props),
     });
+
+    this.on("render", this.focusOnRender);
   }
 
   protected emitResolve(val: PromptDialogResolveVal) {
@@ -100,7 +102,6 @@ class PromptDialog extends BytmDialog {
       inputElem.autocomplete = "off";
       inputElem.spellcheck = false;
       inputElem.value = "defaultValue" in rest ? rest.defaultValue ?? "" : "";
-      inputElem.autofocus = true;
 
       const inputEnterListener = (e: KeyboardEvent) => {
         if(e.key === "Enter") {
@@ -134,7 +135,6 @@ class PromptDialog extends BytmDialog {
       confirmBtn.textContent = await this.consumePromptStringGen(type, rest.confirmBtnText, t("prompt_confirm"));
       confirmBtn.ariaLabel = confirmBtn.title = await this.consumePromptStringGen(type, rest.confirmBtnTooltip, t("click_to_confirm_tooltip"));
       confirmBtn.tabIndex = 0;
-      confirmBtn.autofocus = type !== "prompt";
       confirmBtn.addEventListener("click", () => {
         this.emitResolve(type === "confirm" ? true : (document.querySelector<HTMLInputElement>("#bytm-prompt-dialog-input"))?.value?.trim() ?? null);
         promptDialog?.close();
@@ -147,8 +147,6 @@ class PromptDialog extends BytmDialog {
     closeBtn.textContent = await this.consumePromptStringGen(type, rest.denyBtnText, t(type === "alert" ? "prompt_close" : "prompt_cancel"));
     closeBtn.ariaLabel = closeBtn.title = await this.consumePromptStringGen(type, rest.denyBtnTooltip, t(type === "alert" ? "click_to_close_tooltip" : "click_to_cancel_tooltip"));
     closeBtn.tabIndex = 0;
-    if(type === "alert")
-      closeBtn.autofocus = true;
     closeBtn.addEventListener("click", () => {
       const resVals: Record<PromptType, boolean | null> = {
         alert: true,
@@ -174,6 +172,27 @@ class PromptDialog extends BytmDialog {
       return await stringGen(curPromptType);
     return String(stringGen ?? fallback);
   }
+
+  /** Called on render to focus on the confirm or cancel button or text input, depending on prompt type */
+  protected focusOnRender() {
+    const inputElem = document.querySelector<HTMLInputElement>("#bytm-prompt-dialog-input");
+
+    if(inputElem)
+      return inputElem.focus();
+
+    let captureEnterKey = true;
+    document.addEventListener("keydown", (e) => {
+      if(e.key === "Enter" && captureEnterKey) {
+        const confBtn = document.querySelector<HTMLButtonElement>("#bytm-prompt-dialog-confirm");
+        const closeBtn = document.querySelector<HTMLButtonElement>("#bytm-prompt-dialog-close");
+
+        if(confBtn || closeBtn) {
+          confBtn?.click() ?? closeBtn?.click();
+          captureEnterKey = false;
+        }
+      }
+    }, { capture: true, once: true });
+  }
 }
 
 //#region showPrompt fn