From a414241541d2cea8be49ca558c2da044c5ff7050 Mon Sep 17 00:00:00 2001
From: mrjo118 <jo.118@hotmail.com>
Date: Wed, 20 Aug 2025 07:33:31 +0100
Subject: [PATCH] Mobile: Improve tag screen usability to allow add or remove
 tag with a single press, when the keyboard is open (#12954)

---
 packages/app-mobile/components/ComboBox.tsx    |  1 +
 packages/app-mobile/components/SearchInput.tsx | 14 +++++++-------
 packages/app-mobile/components/TagEditor.tsx   |  1 +
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/app-mobile/components/ComboBox.tsx b/packages/app-mobile/components/ComboBox.tsx
index ffdb9e72b6..7c638b981a 100644
--- a/packages/app-mobile/components/ComboBox.tsx
+++ b/packages/app-mobile/components/ComboBox.tsx
@@ -540,6 +540,7 @@ const ComboBox: React.FC<Props> = ({
 	};
 	const activeId = `${baseId}-${selectedIndex}`;
 	const searchResults = <NestableFlatList
+		keyboardShouldPersistTaps="handled"
 		ref={listRef}
 		data={results}
 		{...searchResultProps}
diff --git a/packages/app-mobile/components/SearchInput.tsx b/packages/app-mobile/components/SearchInput.tsx
index 1a185b12fd..f5235435d3 100644
--- a/packages/app-mobile/components/SearchInput.tsx
+++ b/packages/app-mobile/components/SearchInput.tsx
@@ -1,11 +1,10 @@
 import * as React from 'react';
 import TextInput from './TextInput';
-import { View, StyleSheet, TextInputProps, ViewStyle, TextInput as ReactNativeTextInput } from 'react-native';
+import { View, StyleSheet, TextInputProps, ViewStyle, TextInput as ReactNativeTextInput, Keyboard } from 'react-native';
 import { _ } from '@joplin/lib/locale';
 import { Ref, useCallback, useMemo } from 'react';
 import { themeStyle } from './global-style';
 import IconButton from './IconButton';
-import Icon from './Icon';
 
 
 interface SearchInputProps extends TextInputProps {
@@ -58,11 +57,12 @@ const SearchInput: React.FC<SearchInputProps> = ({ inputRef, themeId, value, con
 	}, [onChangeText]);
 
 	return <View style={[styles.root, containerStyle]}>
-		<Icon
-			aria-hidden={true}
-			name='material magnify'
-			accessibilityLabel={null}
-			style={styles.icon}
+		<IconButton
+			iconName='material magnify'
+			onPress={() => Keyboard.dismiss()}
+			description={_('Hide keyboard')}
+			iconStyle={styles.icon}
+			themeId={themeId}
 		/>
 		<TextInput
 			ref={inputRef}
diff --git a/packages/app-mobile/components/TagEditor.tsx b/packages/app-mobile/components/TagEditor.tsx
index 918da910bf..f3f36402de 100644
--- a/packages/app-mobile/components/TagEditor.tsx
+++ b/packages/app-mobile/components/TagEditor.tsx
@@ -171,6 +171,7 @@ const TagsBox: React.FC<TagsBoxProps> = props => {
 	return <View style={props.styles.tagBoxRoot}>
 		<Text style={props.styles.header} role='heading'>{_('Associated tags:')}</Text>
 		<ScrollView
+			keyboardShouldPersistTaps="handled"
 			style={props.styles.tagBoxScrollView}
 			// On web, specifying aria-live here announces changes to the associated tags.
 			// However, on Android (and possibly iOS), this breaks focus behavior: