From 42b5208b8b382145cdbc4d5c04a6ce82c1b1593f Mon Sep 17 00:00:00 2001
From: George Sumpster <gsumpster@gmail.com>
Date: Sun, 26 Feb 2023 07:01:26 -0800
Subject: [PATCH] Add button and 'esc' shortcut to clear transaction filter
(#693)
---
.../src/components/accounts/Account.js | 22 +++++++++++++++++++
1 file changed, 22 insertions(+)
diff --git a/packages/desktop-client/src/components/accounts/Account.js b/packages/desktop-client/src/components/accounts/Account.js
index 1d619e439..2a5508e04 100644
--- a/packages/desktop-client/src/components/accounts/Account.js
+++ b/packages/desktop-client/src/components/accounts/Account.js
@@ -57,6 +57,7 @@ import ArrowsShrink3 from 'loot-design/src/svg/v2/ArrowsShrink3';
import CheckCircle1 from 'loot-design/src/svg/v2/CheckCircle1';
import DownloadThickBottom from 'loot-design/src/svg/v2/DownloadThickBottom';
import Pencil1 from 'loot-design/src/svg/v2/Pencil1';
+import SvgRemove from 'loot-design/src/svg/v2/Remove';
import SearchAlternate from 'loot-design/src/svg/v2/SearchAlternate';
import { authorizeBank } from '../../plaid';
@@ -821,9 +822,30 @@ const AccountHeader = React.memo(
}}
/>
}
+ rightContent={
+ search && (
+ <Button
+ bare
+ style={{ padding: 8 }}
+ onClick={() => onSearch('')}
+ title="Clear search term"
+ >
+ <SvgRemove
+ style={{
+ width: 8,
+ height: 8,
+ color: 'inherit',
+ }}
+ />
+ </Button>
+ )
+ }
inputRef={searchInput}
value={search}
placeholder="Search"
+ onKeyDown={e => {
+ if (e.key === 'Escape') onSearch('');
+ }}
getStyle={focused => [
{
backgroundColor: 'transparent',
--
GitLab