From c1280be74ac176caff552673fdf982e2265d7563 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sun, 5 Jan 2025 01:47:06 +0200
Subject: [PATCH] fix(mobile): classic toolbar disappearing when pressing
 dropdowns

---
 .../widgets/ribbon_widgets/classic_editor_toolbar.js |  7 +++++--
 src/public/app/widgets/type_widgets/editable_text.js | 12 ++++++++++--
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/public/app/widgets/ribbon_widgets/classic_editor_toolbar.js b/src/public/app/widgets/ribbon_widgets/classic_editor_toolbar.js
index 6262bb0c3..0c8b96f46 100644
--- a/src/public/app/widgets/ribbon_widgets/classic_editor_toolbar.js
+++ b/src/public/app/widgets/ribbon_widgets/classic_editor_toolbar.js
@@ -27,18 +27,21 @@ const TPL = `\
     }
 
     body.mobile .classic-toolbar-widget.visible {
-        display: block;
+        display: flex;
+        align-items: flex-end;
         position: absolute;
         left: 0;
         bottom: 0;
         right: 0;
+        height: 50vh;
         overflow-x: auto;
-        background: var(--main-background-color);
+        background: transparent;
         z-index: 500;
     }
 
     body.mobile .classic-toolbar-widget .ck.ck-toolbar {
         position: absolute;
+        background-color: var(--main-background-color);
     }
 </style>
 `;
diff --git a/src/public/app/widgets/type_widgets/editable_text.js b/src/public/app/widgets/type_widgets/editable_text.js
index 24585d5db..ac9a91726 100644
--- a/src/public/app/widgets/type_widgets/editable_text.js
+++ b/src/public/app/widgets/type_widgets/editable_text.js
@@ -228,11 +228,19 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget {
                         $classicToolbarWidget.addClass("visible");
                     });
 
+                    // Hide the formatting toolbar
                     this.$editor.on("focusout", (e) => {
                         setTimeout(() => {
-                            if (document.activeElement !== this.$editor[0]) {
-                                $classicToolbarWidget.removeClass("visible");
+                            if (document.activeElement === this.$editor[0]) {
+                                // Editor has been refocused.
+                                return;
                             }
+
+                            if ($classicToolbarWidget[0].contains(document.activeElement)) {
+                                return;
+                            }
+
+                            $classicToolbarWidget.removeClass("visible");
                         }, 100);
                     });
                 }