From be86e0b4399edd034393331de5f0a75e80558661 Mon Sep 17 00:00:00 2001
From: yougotwill <willmgrant@gmail.com>
Date: Fri, 2 Aug 2024 14:17:46 +1000
Subject: [PATCH] fix: search input clears on escape when focused

---
 ts/components/SessionSearchInput.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/ts/components/SessionSearchInput.tsx b/ts/components/SessionSearchInput.tsx
index d8df8fc7b..bfe7e5a2b 100644
--- a/ts/components/SessionSearchInput.tsx
+++ b/ts/components/SessionSearchInput.tsx
@@ -1,12 +1,13 @@
 import { Dispatch } from '@reduxjs/toolkit';
 import { debounce } from 'lodash';
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components';
 import { clearSearch, search, updateSearchTerm } from '../state/ducks/search';
 import { getConversationsCount } from '../state/selectors/conversations';
 import { getLeftOverlayMode } from '../state/selectors/section';
 import { SessionIconButton } from './icon';
+import { useHotkey } from '../hooks/useHotkey';
 
 const StyledSearchInput = styled.div`
   height: var(--search-input-height);
@@ -70,6 +71,15 @@ export const SessionSearchInput = () => {
   const isGroupCreationSearch = useSelector(getLeftOverlayMode) === 'closed-group';
   const convoCount = useSelector(getConversationsCount);
 
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useHotkey('Escape', () => {
+    if (inputRef.current !== null && inputRef.current === document.activeElement) {
+      setCurrentSearchTerm('');
+      dispatch(clearSearch());
+    }
+  });
+
   // just after onboard we only have a conversation with ourself
   if (convoCount <= 1) {
     return null;
@@ -87,6 +97,7 @@ export const SessionSearchInput = () => {
         iconType="search"
       />
       <StyledInput
+        ref={inputRef}
         value={currentSearchTerm}
         onChange={e => {
           const inputValue = e.target.value;