From 8c5eaaf65c524d5b0cc45c4f7293dee798bcad71 Mon Sep 17 00:00:00 2001
From: Laurent Cozic <laurent22@users.noreply.github.com>
Date: Sun, 26 Nov 2023 12:37:45 +0100
Subject: [PATCH] Mobile: Fixes #9376: Sidebar is not dismissed when creating a
 note

---
 packages/app-mobile/components/ActionButton.tsx | 17 +++++++++++------
 .../components/NoteEditor/SearchPanel.tsx       |  4 +---
 packages/app-mobile/components/screens/Note.tsx |  2 +-
 .../app-mobile/components/screens/Notes.tsx     |  2 +-
 4 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/packages/app-mobile/components/ActionButton.tsx b/packages/app-mobile/components/ActionButton.tsx
index e8bcc2d79..0fdb0161c 100644
--- a/packages/app-mobile/components/ActionButton.tsx
+++ b/packages/app-mobile/components/ActionButton.tsx
@@ -1,10 +1,12 @@
 const React = require('react');
 import { useState, useCallback, useMemo } from 'react';
-
-const Icon = require('react-native-vector-icons/Ionicons').default;
 import { FAB, Portal } from 'react-native-paper';
 import { _ } from '@joplin/lib/locale';
+import { Dispatch } from 'redux';
+const Icon = require('react-native-vector-icons/Ionicons').default;
 
+// eslint-disable-next-line no-undef -- Don't know why it says React is undefined when it's defined above
+type FABGroupProps = React.ComponentProps<typeof FAB.Group>;
 
 type OnButtonPress = ()=> void;
 interface ButtonSpec {
@@ -19,6 +21,7 @@ interface ActionButtonProps {
 
 	// If not given, an "add" button will be used.
 	mainButton?: ButtonSpec;
+	dispatch: Dispatch;
 }
 
 const defaultOnPress = () => {};
@@ -36,10 +39,12 @@ const useIcon = (iconName: string) => {
 
 const ActionButton = (props: ActionButtonProps) => {
 	const [open, setOpen] = useState(false);
-	const onMenuToggled = useCallback(
-		(state: { open: boolean }) => setOpen(state.open)
-		, [setOpen]);
-
+	const onMenuToggled: FABGroupProps['onStateChange'] = useCallback(state => {
+		props.dispatch({
+			type: 'SIDE_MENU_CLOSE',
+		});
+		setOpen(state.open);
+	}, [setOpen, props.dispatch]);
 
 	const actions = useMemo(() => (props.buttons ?? []).map(button => {
 		return {
diff --git a/packages/app-mobile/components/NoteEditor/SearchPanel.tsx b/packages/app-mobile/components/NoteEditor/SearchPanel.tsx
index e912da924..8f665b629 100644
--- a/packages/app-mobile/components/NoteEditor/SearchPanel.tsx
+++ b/packages/app-mobile/components/NoteEditor/SearchPanel.tsx
@@ -40,9 +40,7 @@ interface ActionButtonProps {
 	onPress: Callback;
 }
 
-const ActionButton = (
-	props: ActionButtonProps,
-) => {
+const ActionButton = (props: ActionButtonProps) => {
 	return (
 		<CustomButton
 			themeId={props.themeId}
diff --git a/packages/app-mobile/components/screens/Note.tsx b/packages/app-mobile/components/screens/Note.tsx
index 0cf6903a7..ca7d705c2 100644
--- a/packages/app-mobile/components/screens/Note.tsx
+++ b/packages/app-mobile/components/screens/Note.tsx
@@ -1422,7 +1422,7 @@ class NoteScreenComponent extends BaseScreenComponent {
 
 			if (this.state.mode === 'edit') return null;
 
-			return <ActionButton mainButton={editButton} />;
+			return <ActionButton mainButton={editButton} dispatch={this.props.dispatch} />;
 		};
 
 		// Save button is not really needed anymore with the improved save logic
diff --git a/packages/app-mobile/components/screens/Notes.tsx b/packages/app-mobile/components/screens/Notes.tsx
index 2b7c16628..db09a474b 100644
--- a/packages/app-mobile/components/screens/Notes.tsx
+++ b/packages/app-mobile/components/screens/Notes.tsx
@@ -265,7 +265,7 @@ class NotesScreenComponent extends BaseScreenComponent<any> {
 					color: '#9b59b6',
 					icon: 'document',
 				});
-				return <ActionButton buttons={buttons}/>;
+				return <ActionButton buttons={buttons} dispatch={this.props.dispatch}/>;
 			}
 			return null;
 		};