General: Hide the keyboard icon from the Monaco editor on Apple devic…

…es (#9519)

src/main/webapp/app/shared/monaco-editor/monaco-editor.component.scss

@@ -7,6 +7,11 @@
     .monaco-editor {
         // Disables the focus border around the editor.
         outline: none;
+
+        // Apple devices display a keyboard icon in the bottom right corner of the editor. We disable this as it does not fit our design.
+        .iPadShowKeyboard {
+            display: none;
+        }
     }
 }
 

src/main/webapp/app/shared/monaco-editor/monaco-editor.component.ts

@@ -119,6 +119,11 @@ export class MonacoEditorComponent implements OnInit, OnDestroy {
         });
 
         this.blurEditorWidgetListener = this._editor.onDidBlurEditorWidget(() => {
+            // On iOS, the editor does not lose focus when clicking outside of it. This listener ensures that the editor loses focus when the editor widget loses focus.
+            // See https://github.com/microsoft/monaco-editor/issues/307
+            if (document.activeElement && 'blur' in document.activeElement && typeof document.activeElement.blur === 'function') {
+                document.activeElement.blur();
+            }
             this.onBlurEditor.emit();
         });
     }