diff --git a/src/app/atoms/modal/RawModal.jsx b/src/app/atoms/modal/RawModal.jsx index 450be0e..401a89b 100644 --- a/src/app/atoms/modal/RawModal.jsx +++ b/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} ` : ''; diff --git a/src/app/organisms/search/Search.jsx b/src/app/organisms/search/Search.jsx index 64c898b..6731155 100644 --- a/src/app/organisms/search/Search.jsx +++ b/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} /> diff --git a/src/app/organisms/settings/Settings.jsx b/src/app/organisms/settings/Settings.jsx index 2e0f64b..29ca6e3 100644 --- a/src/app/organisms/settings/Settings.jsx +++ b/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]; } diff --git a/src/client/action/navigation.js b/src/client/action/navigation.js index 1292d56..7403894 100644 --- a/src/client/action/navigation.js +++ b/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, + }); +} diff --git a/src/client/event/hotkeys.js b/src/client/event/hotkeys.js index e59ce3d..ab5e4a9 100644 --- a/src/client/event/hotkeys.js +++ b/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; diff --git a/src/client/state/cons.js b/src/client/state/cons.js index 4c1ca1d..9d4d8f6 100644 --- a/src/client/state/cons.js +++ b/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', diff --git a/src/client/state/navigation.js b/src/client/state/navigation.js index 7b13dd1..15d6ddb 100644 --- a/src/client/state/navigation.js +++ b/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,