Mobile: Fixes #9376: Sidebar is not dismissed when creating a note

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 {

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}

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

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;
 		};