From 5474709517cefb77b218bf375ec18cddc243248c Mon Sep 17 00:00:00 2001
From: Arnei <arnewilken@yahoo.de>
Date: Fri, 19 Jan 2024 15:26:44 +0100
Subject: [PATCH] Fix tooltip not showing on subtitle select button

Satisfies a material-ui quirk concerning
`ThemedTooltip` and button. Will now correctly
show a tooltip on the subtitle select button even
if it is disabled.
---
 src/i18n/locales/en-US.json |  1 +
 src/main/SubtitleSelect.tsx | 23 ++++++++++++-----------
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index b77a3d038..640df790d 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -246,6 +246,7 @@
       "createSubtitleButton-clicked-tooltip-aria": "Contains a dialog for creating new subtitles",
       "createSubtitleButton-createButton": "Create",
       "createSubtitleButton-createButton-tooltip": "Start a new subtitle file with the chosen title.",
+      "createSubtitleButton-createButton-disabled-tooltip": "Please pick a language from the dropdown above.",
       "createSubtitleDropdown-label": "Pick a language",
       "backButton": "Back",
       "backButton-tooltip": "Return to subtitle selection",
diff --git a/src/main/SubtitleSelect.tsx b/src/main/SubtitleSelect.tsx
index c871ea58d..4a4ba1578 100644
--- a/src/main/SubtitleSelect.tsx
+++ b/src/main/SubtitleSelect.tsx
@@ -299,17 +299,18 @@ const SubtitleAddButton: React.FC<{
                 </Select>
               </ThemeProvider>
 
-              {/* "By default disabled elements like <button> do not trigger user interactions
-                * so a Tooltip will not activate on normal events like hover. To accommodate
-                * disabled elements, add a simple wrapper element, such as a span."
-                * see: https://mui.com/material-ui/react-tooltip/#disabled-elements */}
-              <ThemedTooltip title={t("subtitles.createSubtitleButton-createButton-tooltip")}>
-                <button css={[basicButtonStyle(theme), createButtonStyle]}
-                  type="submit"
-                  aria-label={t("subtitles.createSubtitleButton-createButton-tooltip")}
-                  disabled={submitting || pristine}>
-                  {t("subtitles.createSubtitleButton-createButton")}
-                </button>
+              <ThemedTooltip title={submitting || pristine ?
+                t("subtitles.createSubtitleButton-createButton-disabled-tooltip") :
+                t("subtitles.createSubtitleButton-createButton-tooltip")
+              }>
+                <span>
+                  <button css={[basicButtonStyle(theme), createButtonStyle]}
+                    type="submit"
+                    aria-label={t("subtitles.createSubtitleButton-createButton-tooltip")}
+                    disabled={submitting || pristine}>
+                    {t("subtitles.createSubtitleButton-createButton")}
+                  </button>
+                </span>
               </ThemedTooltip>
 
             </form>