From bb66e81abe9049a7e9c086485c5a3b53fe0efc3f Mon Sep 17 00:00:00 2001
From: Henry Heino <46334387+personalizedrefrigerator@users.noreply.github.com>
Date: Sat, 16 Nov 2024 13:07:34 -0800
Subject: [PATCH] Mobile: Fixes #11384: Fix switching notes then unloading app
 causes blank screen (#11396)

---
 .../components/ScreenHeader/index.tsx         | 11 +++++++----
 .../app-mobile/components/screens/Note.tsx    | 19 +++++++++++++++----
 .../app-mobile/components/screens/Notes.tsx   |  4 ++--
 .../components/screens/SearchScreen/index.tsx |  2 +-
 4 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/packages/app-mobile/components/ScreenHeader/index.tsx b/packages/app-mobile/components/ScreenHeader/index.tsx
index 0afebcaaa..7fe3bccc9 100644
--- a/packages/app-mobile/components/ScreenHeader/index.tsx
+++ b/packages/app-mobile/components/ScreenHeader/index.tsx
@@ -37,7 +37,8 @@ const PADDING_V = 10;
 type OnPressCallback=()=> void;
 
 export interface FolderPickerOptions {
-	enabled: boolean;
+	visible: boolean;
+	disabled?: boolean;
 	selectedFolderId?: string;
 	onValueChange?: OnValueChangedListener;
 	mustSelect?: boolean;
@@ -517,10 +518,12 @@ class ScreenHeaderComponent extends PureComponent<ScreenHeaderProps, ScreenHeade
 			});
 		}
 
-		const createTitleComponent = (disabled: boolean, hideableAfterTitleComponents: ReactElement) => {
+		const createTitleComponent = (hideableAfterTitleComponents: ReactElement) => {
 			const folderPickerOptions = this.props.folderPickerOptions;
 
-			if (folderPickerOptions && folderPickerOptions.enabled) {
+			if (folderPickerOptions && folderPickerOptions.visible) {
+				const hasSelectedNotes = this.props.selectedNoteIds.length > 0;
+				const disabled = this.props.folderPickerOptions.disabled ?? !hasSelectedNotes;
 				return (
 					<FolderPicker
 						themeId={themeId}
@@ -599,7 +602,7 @@ class ScreenHeaderComponent extends PureComponent<ScreenHeaderProps, ScreenHeade
 			{betaIconComp}
 		</>;
 
-		const titleComp = createTitleComponent(headerItemDisabled, hideableRightComponents);
+		const titleComp = createTitleComponent(hideableRightComponents);
 
 		const contextMenuStyle: ViewStyle = {
 			paddingTop: PADDING_V,
diff --git a/packages/app-mobile/components/screens/Note.tsx b/packages/app-mobile/components/screens/Note.tsx
index a10bc2e0a..f12aefebf 100644
--- a/packages/app-mobile/components/screens/Note.tsx
+++ b/packages/app-mobile/components/screens/Note.tsx
@@ -50,7 +50,7 @@ import { isSupportedLanguage } from '../../services/voiceTyping/vosk';
 import { ChangeEvent as EditorChangeEvent, SelectionRangeChangeEvent, UndoRedoDepthChangeEvent } from '@joplin/editor/events';
 import { join } from 'path';
 import { Dispatch } from 'redux';
-import { RefObject } from 'react';
+import { RefObject, useRef } from 'react';
 import { SelectionRange } from '../NoteEditor/types';
 import { getNoteCallbackUrl } from '@joplin/lib/callbackUrlUtils';
 import { AppState } from '../../utils/types';
@@ -1372,7 +1372,8 @@ class NoteScreenComponent extends BaseScreenComponent<Props, State> implements B
 
 	public folderPickerOptions() {
 		const options = {
-			enabled: !this.state.readOnly,
+			visible: !this.state.readOnly,
+			disabled: false,
 			selectedFolderId: this.state.folder ? this.state.folder.id : null,
 			onValueChange: this.folderPickerOptions_valueChanged,
 		};
@@ -1380,7 +1381,7 @@ class NoteScreenComponent extends BaseScreenComponent<Props, State> implements B
 		if (
 			this.folderPickerOptions_
 			&& options.selectedFolderId === this.folderPickerOptions_.selectedFolderId
-			&& options.enabled === this.folderPickerOptions_.enabled
+			&& options.visible === this.folderPickerOptions_.visible
 		) {
 			return this.folderPickerOptions_;
 		}
@@ -1639,8 +1640,18 @@ class NoteScreenComponent extends BaseScreenComponent<Props, State> implements B
 // which can cause some bugs where previously set state to another note would interfere
 // how the new note should be rendered
 const NoteScreenWrapper = (props: Props) => {
+	const lastNonNullNoteIdRef = useRef(props.noteId);
+	if (props.noteId) {
+		lastNonNullNoteIdRef.current = props.noteId;
+	}
+
+	// This keeps the current note open even if it's no longer present in selectedNoteIds.
+	// This might happen, for example, if the selected note is moved to an unselected
+	// folder.
+	const noteId = lastNonNullNoteIdRef.current;
+
 	return (
-		<NoteScreenComponent key={props.noteId} {...props} />
+		<NoteScreenComponent key={noteId} {...props} noteId={noteId} />
 	);
 };
 
diff --git a/packages/app-mobile/components/screens/Notes.tsx b/packages/app-mobile/components/screens/Notes.tsx
index a3550c160..d4d01e58b 100644
--- a/packages/app-mobile/components/screens/Notes.tsx
+++ b/packages/app-mobile/components/screens/Notes.tsx
@@ -222,11 +222,11 @@ class NotesScreenComponent extends BaseScreenComponent<Props, State> {
 
 	public folderPickerOptions() {
 		const options = {
-			enabled: this.props.noteSelectionEnabled,
+			visible: this.props.noteSelectionEnabled,
 			mustSelect: true,
 		};
 
-		if (this.folderPickerOptions_ && options.enabled === this.folderPickerOptions_.enabled) return this.folderPickerOptions_;
+		if (this.folderPickerOptions_ && options.visible === this.folderPickerOptions_.visible) return this.folderPickerOptions_;
 
 		this.folderPickerOptions_ = options;
 		return this.folderPickerOptions_;
diff --git a/packages/app-mobile/components/screens/SearchScreen/index.tsx b/packages/app-mobile/components/screens/SearchScreen/index.tsx
index 4e365585d..6166499b7 100644
--- a/packages/app-mobile/components/screens/SearchScreen/index.tsx
+++ b/packages/app-mobile/components/screens/SearchScreen/index.tsx
@@ -85,7 +85,7 @@ const SearchScreenComponent: React.FC<Props> = props => {
 			<ScreenHeader
 				title={_('Search')}
 				folderPickerOptions={{
-					enabled: props.noteSelectionEnabled,
+					visible: props.noteSelectionEnabled,
 					mustSelect: true,
 				}}
 				showSideMenuButton={false}