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.
opencast · Jan 19, 2024 · 5474709 · 5474709
1 parent 5a83665
commit 5474709
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 11 deletions.
diff --git 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
@@ -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>