fix(mobile): note view hide bar options on editor focus (#1903)

packages/web/src/javascripts/Components/ApplicationView/ApplicationView.tsx

@@ -174,10 +174,7 @@ const ApplicationView: FunctionComponent<Props> = ({ application, mainApplicatio
   }, [needsUnlock, launched])
 
   const renderChallenges = useCallback(() => {
-    return (
+    return challenges.map((challenge) => (
-      <AndroidBackHandlerProvider application={application}>
-        {challenges.map((challenge) => {
-          return (
       <div className="sk-modal" key={`${challenge.id}${application.ephemeralIdentifier}`}>
         <ChallengeModal
           key={`${challenge.id}${application.ephemeralIdentifier}`}
@@ -188,14 +185,11 @@ const ApplicationView: FunctionComponent<Props> = ({ application, mainApplicatio
           onDismiss={removeChallenge}
         />
       </div>
-          )
+    ))
-        })}
-      </AndroidBackHandlerProvider>
-    )
   }, [viewControllerManager, challenges, mainApplicationGroup, removeChallenge, application])
 
   if (!renderAppContents) {
-    return renderChallenges()
+    return <AndroidBackHandlerProvider application={application}>{renderChallenges()}</AndroidBackHandlerProvider>
   }
 
   return (

packages/web/src/javascripts/Components/NoteView/NoteView.tsx

@@ -17,7 +17,7 @@ import {
   EditorFontSize,
   NoteType,
 } from '@standardnotes/snjs'
-import { debounce, isDesktopApplication } from '@/Utils'
+import { debounce, isDesktopApplication, isMobileScreen } from '@/Utils'
 import { EditorEventSource } from '../../Types/EditorEventSource'
 import { confirmDialog, KeyboardModifier, KeyboardKey } from '@standardnotes/ui-services'
 import { STRING_DELETE_PLACEHOLDER_ATTEMPT, STRING_DELETE_LOCKED_ATTEMPT, StringDeleteNote } from '@/Constants/Strings'
@@ -74,6 +74,7 @@ type State = {
   /** Setting to true then false will allow the main content textarea to be destroyed
    * then re-initialized. Used when reloading spellcheck status. */
   textareaUnloading: boolean
+  plaintextEditorFocused?: boolean
 
   leftResizerWidth: number
   leftResizerOffset: number
@@ -104,7 +105,6 @@ class NoteView extends PureComponent<NoteViewProps, State> {
   private lastEditorFocusEventSource?: EditorEventSource
   onEditorComponentLoad?: () => void
 
-  private scrollPosition = 0
   private removeTrashKeyObserver?: () => void
   private removeTabObserver?: () => void
   private removeComponentStreamObserver?: () => void
@@ -193,8 +193,6 @@ class NoteView extends PureComponent<NoteViewProps, State> {
     ;(this.onPanelResizeFinish as unknown) = undefined
     ;(this.stackComponentExpanded as unknown) = undefined
     ;(this.toggleStackComponent as unknown) = undefined
-    ;(this.setScrollPosition as unknown) = undefined
-    ;(this.resetScrollPosition as unknown) = undefined
     ;(this.onSystemEditorLoad as unknown) = undefined
     ;(this.debounceReloadEditorComponent as unknown) = undefined
     ;(this.textAreaChangeDebounceSave as unknown) = undefined
@@ -644,6 +642,15 @@ class NoteView extends PureComponent<NoteViewProps, State> {
       this.application.notifyWebEvent(WebAppEvent.EditorFocused, { eventSource: this.lastEditorFocusEventSource })
     }
     this.lastEditorFocusEventSource = undefined
+    this.setState({ plaintextEditorFocused: true })
+  }
+
+  onContentBlur = () => {
+    if (this.lastEditorFocusEventSource) {
+      this.application.notifyWebEvent(WebAppEvent.EditorFocused, { eventSource: this.lastEditorFocusEventSource })
+    }
+    this.lastEditorFocusEventSource = undefined
+    this.setState({ plaintextEditorFocused: false })
   }
 
   setShowProtectedOverlay(show: boolean) {
@@ -837,16 +844,6 @@ class NoteView extends PureComponent<NoteViewProps, State> {
     })
   }
 
-  setScrollPosition = () => {
-    const editor = document.getElementById(ElementIds.NoteTextEditor) as HTMLInputElement
-    this.scrollPosition = editor.scrollTop
-  }
-
-  resetScrollPosition = () => {
-    const editor = document.getElementById(ElementIds.NoteTextEditor) as HTMLInputElement
-    editor.scrollTop = this.scrollPosition
-  }
-
   onSystemEditorLoad = (ref: HTMLTextAreaElement | null) => {
     if (this.removeTabObserver || !ref) {
       return
@@ -900,18 +897,12 @@ class NoteView extends PureComponent<NoteViewProps, State> {
       },
     })
 
-    editor.addEventListener('scroll', this.setScrollPosition)
-    editor.addEventListener('input', this.resetScrollPosition)
-
     const observer = new MutationObserver((records) => {
       for (const record of records) {
         record.removedNodes.forEach((node) => {
           if (node === editor) {
             this.removeTabObserver?.()
             this.removeTabObserver = undefined
-            editor.removeEventListener('scroll', this.setScrollPosition)
-            editor.removeEventListener('scroll', this.resetScrollPosition)
-            this.scrollPosition = 0
           }
         })
       }
@@ -942,6 +933,8 @@ class NoteView extends PureComponent<NoteViewProps, State> {
       )
     }
 
+    const renderHeaderOptions = isMobileScreen() ? !this.state.plaintextEditorFocused : true
+
     return (
       <div
         aria-label="Note"
@@ -1005,6 +998,7 @@ class NoteView extends PureComponent<NoteViewProps, State> {
                   updateSavingIndicator={this.state.updateSavingIndicator}
                 />
               </div>
+              {renderHeaderOptions && (
                 <div className="flex items-center gap-3">
                   <LinkedItemsButton
                     filesController={this.viewControllerManager.filesController}
@@ -1030,6 +1024,7 @@ class NoteView extends PureComponent<NoteViewProps, State> {
                     onClickPreprocessing={this.ensureNoteIsInsertedBeforeUIAction}
                   />
                 </div>
+              )}
             </div>
             <LinkedItemBubblesContainer linkingController={this.viewControllerManager.linkingController} />
           </div>
@@ -1073,6 +1068,7 @@ class NoteView extends PureComponent<NoteViewProps, State> {
               id={ElementIds.NoteTextEditor}
               onChange={this.onTextAreaChange}
               onFocus={this.onContentFocus}
+              onBlur={this.onContentBlur}
               readOnly={this.state.noteLocked}
               ref={(ref) => ref && this.onSystemEditorLoad(ref)}
               spellCheck={this.state.spellcheck}

packages/web/src/javascripts/Components/ResponsivePane/ResponsivePaneProvider.tsx

@@ -54,7 +54,7 @@ function useStateRef<State>(state: State): MutableRefObject<State> {
   return ref
 }
 
-const MemoizedChildren = memo(({ children }: ChildrenProps) => <div>{children}</div>)
+const MemoizedChildren = memo(({ children }: ChildrenProps) => <>{children}</>)
 
 const ResponsivePaneProvider = ({ paneController, children }: ProviderProps) => {
   const currentSelectedPane = paneController.currentPane

packages/web/src/javascripts/NativeMobileWeb/useAndroidBackHandler.tsx

@@ -25,7 +25,7 @@ type ProviderProps = {
   application: WebApplication
 } & ChildrenProps
 
-const MemoizedChildren = memo(({ children }: ChildrenProps) => <div>{children}</div>)
+const MemoizedChildren = memo(({ children }: ChildrenProps) => <>{children}</>)
 
 const AndroidBackHandlerProvider = ({ application, children }: ProviderProps) => {
   const addAndroidBackHandler = useCallback(