fix: search input clears on escape when focused

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;