From 9da8f4e419b5810f6c99af21276ed0062829877d Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Wed, 1 Feb 2023 20:24:03 +0530
Subject: [PATCH] fix: Fixed issue where clicking on the toolbar would dismiss
 the keyboard & toolbar

---
 .../MobileToolbarPlugin/MobileToolbarPlugin.tsx     | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/MobileToolbarPlugin/MobileToolbarPlugin.tsx b/packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/MobileToolbarPlugin/MobileToolbarPlugin.tsx
index 07b9f0e86..c9c994044 100644
--- a/packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/MobileToolbarPlugin/MobileToolbarPlugin.tsx
+++ b/packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/MobileToolbarPlugin/MobileToolbarPlugin.tsx
@@ -6,7 +6,7 @@ import { getSelectedNode } from '@standardnotes/blocks-editor/src/Lexical/Utils/
 import { sanitizeUrl } from '@standardnotes/blocks-editor/src/Lexical/Utils/sanitizeUrl'
 import { $getSelection, $isRangeSelection, FORMAT_TEXT_COMMAND } from 'lexical'
 import { $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link'
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { GetAlignmentBlocks } from '../Blocks/Alignment'
 import { GetBulletedListBlock } from '../Blocks/BulletedList'
 import { GetChecklistBlock } from '../Blocks/Checklist'
@@ -32,6 +32,8 @@ const MobileToolbarPlugin = () => {
   const [isInEditor, setIsInEditor] = useState(false)
   const isMobile = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.sm)
 
+  const toolbarRef = useRef<HTMLDivElement>(null)
+
   const insertLink = useCallback(() => {
     const selection = $getSelection()
     if (!$isRangeSelection(selection)) {
@@ -133,7 +135,12 @@ const MobileToolbarPlugin = () => {
     }
 
     const handleFocus = () => setIsInEditor(true)
-    const handleBlur = () => setIsInEditor(false)
+    const handleBlur = (event: FocusEvent) => {
+      if (toolbarRef.current?.contains(event.relatedTarget as Node)) {
+        return
+      }
+      setIsInEditor(false)
+    }
 
     rootElement.addEventListener('focus', handleFocus)
     rootElement.addEventListener('blur', handleBlur)
@@ -151,7 +158,7 @@ const MobileToolbarPlugin = () => {
   return (
     <>
       {modal}
-      <div className="flex w-full flex-shrink-0 border-t border-border bg-contrast">
+      <div className="flex w-full flex-shrink-0 border-t border-border bg-contrast" ref={toolbarRef}>
         <div className={classNames('flex items-center gap-1 overflow-x-auto', '[&::-webkit-scrollbar]:h-0')}>
           {items.map((item) => {
             return (