src/app/atoms/modal/RawModal.jsx

@@ -27,7 +27,7 @@ function RawModal({
   }
 
   useEffect(() => {
-    navigation.setIsRawModalVisible(isOpen);
+    navigation.isRawModalVisible = isOpen;
   }, [isOpen]);
 
   const modalOverlayClass = (overlayClassName !== null) ? `${overlayClassName} ` : '';

src/app/organisms/search/Search.jsx

@@ -44,6 +44,7 @@ function useVisiblityToggle(setResult) {
   }, [isOpen]);
 
   const requestClose = () => setIsOpen(false);
+  navigation.on(cons.events.navigation.REQUEST_CLOSE, requestClose);
 
   return [isOpen, requestClose];
 }
@@ -154,6 +155,12 @@ function Search() {
     }
   };
 
+  const handleKeyPress = (e) => {
+    if (e.key === 'Backspace' && searchRef.current.value.length === 0) {
+      requestClose();
+    }
+  };
+
   const openItem = (roomId, type) => {
     if (type === 'space') selectTab(roomId);
     else selectRoom(roomId);
@@ -210,6 +217,7 @@ function Search() {
             onChange={handleOnChange}
             forwardRef={searchRef}
             placeholder="Search"
+            onKeyDown={handleKeyPress}
           />
           <IconButton size="small" src={CrossIC} type="reset" onClick={handleCross} tabIndex={-1} />
         </form>

src/app/organisms/settings/Settings.jsx

@@ -317,6 +317,8 @@ function useWindowToggle(setSelectedTab) {
 
   const requestClose = () => setIsOpen(false);
 
+  navigation.on(cons.events.navigation.REQUEST_CLOSE, requestClose);
+
   return [isOpen, requestClose];
 }
 

src/client/action/navigation.js

@@ -181,3 +181,9 @@ export function openEmojiVerification(request, targetDevice) {
     targetDevice,
   });
 }
+
+export function requestClose() {
+  appDispatcher.dispatch({
+    type: cons.actions.navigation.REQUEST_CLOSE,
+  });
+}

src/client/event/hotkeys.js

@@ -1,4 +1,4 @@
-import { openSearch, toggleRoomSettings } from '../action/navigation';
+import { openSearch, toggleRoomSettings, requestClose } from '../action/navigation';
 import navigation from '../state/navigation';
 import { markAsRead } from '../action/notifications';
 
@@ -50,9 +50,12 @@ function listenKeyboard(event) {
   }
 
   if (!event.ctrlKey && !event.altKey && !event.metaKey) {
-    if (navigation.isRawModalVisible) return;
-
     if (event.key === 'Escape') {
+      if (navigation.isRawModalVisible) {
+        requestClose();
+        return;
+      }
+
       if (navigation.isRoomSettings) {
         toggleRoomSettings();
         return;
@@ -62,6 +65,7 @@ function listenKeyboard(event) {
         return;
       }
     }
+    if (navigation.isRawModalVisible) return;
 
     if (['input', 'textarea'].includes(document.activeElement.tagName.toLowerCase())) {
       return;

src/client/state/cons.js

@@ -90,6 +90,7 @@ const cons = {
       JOIN_ALIAS_OPENED: 'JOIN_ALIAS_OPENED',
       INVITE_USER_OPENED: 'INVITE_USER_OPENED',
       SETTINGS_OPENED: 'SETTINGS_OPENED',
+      REQUEST_CLOSE: 'REQUEST_CLOSE',
       PROFILE_VIEWER_OPENED: 'PROFILE_VIEWER_OPENED',
       EMOJIBOARD_OPENED: 'EMOJIBOARD_OPENED',
       READRECEIPTS_OPENED: 'READRECEIPTS_OPENED',

src/client/state/navigation.js

@@ -276,7 +276,7 @@ class Navigation extends EventEmitter {
     return this.rawModelStack.length > 0;
   }
 
-  setIsRawModalVisible(visible) {
+  set isRawModalVisible(visible) {
     if (visible) this.rawModelStack.push(true);
     else this.rawModelStack.pop();
   }
@@ -383,6 +383,11 @@ class Navigation extends EventEmitter {
           action.term,
         );
       },
+      [cons.actions.navigation.REQUEST_CLOSE]: () => {
+        this.emit(
+          cons.events.navigation.REQUEST_CLOSE,
+        );
+      },
       [cons.actions.navigation.OPEN_REUSABLE_CONTEXT_MENU]: () => {
         this.emit(
           cons.events.navigation.REUSABLE_CONTEXT_MENU_OPENED,