From 6b6574e7c9b26e9206facfce61834a9dca426ccc Mon Sep 17 00:00:00 2001
From: Laurent Cozic <laurent@cozic.net>
Date: Tue, 21 Dec 2021 18:29:47 +0100
Subject: [PATCH] Desktop: Resolves #5893: Expand search field when clicking on
 search button

---
 .../app-desktop/gui/SearchBar/SearchBar.tsx   | 20 ++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/packages/app-desktop/gui/SearchBar/SearchBar.tsx b/packages/app-desktop/gui/SearchBar/SearchBar.tsx
index cee07d0e5..f6ccec464 100644
--- a/packages/app-desktop/gui/SearchBar/SearchBar.tsx
+++ b/packages/app-desktop/gui/SearchBar/SearchBar.tsx
@@ -7,6 +7,7 @@ import BaseModel from '@joplin/lib/BaseModel';
 import uuid from '@joplin/lib/uuid';
 const { connect } = require('react-redux');
 import Note from '@joplin/lib/models/Note';
+import { AppState } from '../../app.reducer';
 const debounce = require('debounce');
 const styled = require('styled-components').default;
 
@@ -21,6 +22,7 @@ interface Props {
 	notesParentType: string;
 	dispatch?: Function;
 	selectedNoteId: string;
+	isFocused?: boolean;
 }
 
 function SearchBar(props: Props) {
@@ -116,8 +118,19 @@ function SearchBar(props: Props) {
 	}, [onExitSearch]);
 
 	const onSearchButtonClick = useCallback(() => {
-		void onExitSearch();
-	}, [onExitSearch]);
+		console.info('isFocused', props.isFocused);
+
+		if (props.isFocused) {
+			void onExitSearch();
+		} else {
+			setSearchStarted(true);
+			props.inputRef.current.focus();
+			props.dispatch({
+				type: 'FOCUS_SET',
+				field: 'globalSearch',
+			});
+		}
+	}, [onExitSearch, props.isFocused]);
 
 	useEffect(() => {
 		if (props.notesParentType !== 'Search') {
@@ -141,10 +154,11 @@ function SearchBar(props: Props) {
 	);
 }
 
-const mapStateToProps = (state: any) => {
+const mapStateToProps = (state: AppState) => {
 	return {
 		notesParentType: state.notesParentType,
 		selectedNoteId: stateUtils.selectedNoteId(state),
+		isFocused: state.focusedField === 'globalSearch',
 	};
 };