From 9f7a96e794a7d3a6959cf798811292525045e394 Mon Sep 17 00:00:00 2001 From: Tasos Boulis Date: Wed, 12 Oct 2022 18:04:15 +0300 Subject: [PATCH] Fix 3-dot menu not losing focus after clicking outside (Windows). Related to MM-46424 (#2242) --- src/common/communication.ts | 3 +++ src/main/app/initialize.ts | 3 ++- src/main/app/utils.ts | 6 ++++- src/renderer/components/MainPage.tsx | 37 +++++++++++++++++++--------- src/renderer/css/index.css | 6 ++--- src/renderer/index.tsx | 4 +-- 6 files changed, 40 insertions(+), 19 deletions(-) diff --git a/src/common/communication.ts b/src/common/communication.ts index d5f08733..6ce2aa3b 100644 --- a/src/common/communication.ts +++ b/src/common/communication.ts @@ -24,6 +24,9 @@ export const GET_DARK_MODE = 'get-dark-mode'; export const USER_ACTIVITY_UPDATE = 'user-activity-update'; export const UPDATE_SHORTCUT_MENU = 'update-shortcut-menu'; +export const OPEN_APP_MENU = 'open-app-menu'; +export const APP_MENU_WILL_CLOSE = 'app-menu-will-close'; + export const LOAD_RETRY = 'load_retry'; export const LOAD_SUCCESS = 'load_success'; export const LOAD_FAILED = 'load_fail'; diff --git a/src/main/app/initialize.ts b/src/main/app/initialize.ts index f05c2c68..da9fef54 100644 --- a/src/main/app/initialize.ts +++ b/src/main/app/initialize.ts @@ -35,6 +35,7 @@ import { START_UPDATE_DOWNLOAD, PING_DOMAIN, MAIN_WINDOW_SHOWN, + OPEN_APP_MENU, } from 'common/communication'; import Config from 'common/config'; import urlUtils from 'common/utils/url'; @@ -236,7 +237,7 @@ function initializeInterCommunicationEventListeners() { ipcMain.on(UPDATE_LAST_ACTIVE, handleUpdateLastActive); if (process.platform !== 'darwin') { - ipcMain.on('open-app-menu', handleOpenAppMenu); + ipcMain.on(OPEN_APP_MENU, handleOpenAppMenu); } ipcMain.on(SWITCH_SERVER, handleSwitchServer); diff --git a/src/main/app/utils.ts b/src/main/app/utils.ts index b6ba675d..11508d95 100644 --- a/src/main/app/utils.ts +++ b/src/main/app/utils.ts @@ -18,6 +18,7 @@ import {MattermostServer} from 'common/servers/MattermostServer'; import {TAB_FOCALBOARD, TAB_MESSAGING, TAB_PLAYBOOKS} from 'common/tabs/TabView'; import urlUtils from 'common/utils/url'; import Utils from 'common/utils/util'; +import {APP_MENU_WILL_CLOSE} from 'common/communication'; import updateManager from 'main/autoUpdater'; import {migrationInfoPath, updatePaths} from 'main/constants'; @@ -96,7 +97,10 @@ export function handleUpdateMenuEvent() { const aMenu = createAppMenu(Config, updateManager); Menu.setApplicationMenu(aMenu); - aMenu.addListener('menu-will-close', WindowManager.focusBrowserView); + aMenu.addListener('menu-will-close', () => { + WindowManager.focusBrowserView(); + WindowManager.sendToRenderer(APP_MENU_WILL_CLOSE); + }); // set up context menu for tray icon if (shouldShowTrayIcon()) { diff --git a/src/renderer/components/MainPage.tsx b/src/renderer/components/MainPage.tsx index 732e66a7..be66dcad 100644 --- a/src/renderer/components/MainPage.tsx +++ b/src/renderer/components/MainPage.tsx @@ -49,6 +49,7 @@ import { UPDATE_DOWNLOADS_DROPDOWN, REQUEST_HAS_DOWNLOADS, CLOSE_DOWNLOADS_DROPDOWN_MENU, + APP_MENU_WILL_CLOSE, } from 'common/communication'; import restoreButton from '../../assets/titlebar/chrome-restore.svg'; @@ -101,6 +102,7 @@ type State = { isDownloadsDropdownOpen: boolean; showDownloadsBadge: boolean; hasDownloads: boolean; + threeDotsIsFocused: boolean; }; type TabViewStatus = { @@ -113,13 +115,11 @@ type TabViewStatus = { class MainPage extends React.PureComponent { topBar: React.RefObject; - threeDotMenu: React.RefObject; constructor(props: Props) { super(props); this.topBar = React.createRef(); - this.threeDotMenu = React.createRef(); const firstServer = this.props.teams.find((team) => team.order === this.props.lastActiveTeam) || this.props.teams.find((team) => team.order === 0); let firstTab = firstServer?.tabs.find((tab) => tab.order === firstServer.lastActiveTab) || firstServer?.tabs.find((tab) => tab.order === 0); @@ -141,6 +141,7 @@ class MainPage extends React.PureComponent { isDownloadsDropdownOpen: false, showDownloadsBadge: false, hasDownloads: false, + threeDotsIsFocused: false, }; } @@ -279,12 +280,10 @@ class MainPage extends React.PureComponent { }); }); + window.ipcRenderer.on(APP_MENU_WILL_CLOSE, this.unFocusThreeDotsButton); + if (window.process.platform !== 'darwin') { - window.ipcRenderer.on(FOCUS_THREE_DOT_MENU, () => { - if (this.threeDotMenu.current) { - this.threeDotMenu.current.focus(); - } - }); + window.ipcRenderer.on(FOCUS_THREE_DOT_MENU, this.focusThreeDotsButton); } window.addEventListener('click', this.handleCloseDropdowns); @@ -358,9 +357,6 @@ class MainPage extends React.PureComponent { } openMenu = () => { - if (window.process.platform !== 'darwin') { - this.threeDotMenu.current?.blur(); - } this.props.openMenu(); } @@ -390,6 +386,18 @@ class MainPage extends React.PureComponent { window.ipcRenderer.send(OPEN_DOWNLOADS_DROPDOWN); } + focusThreeDotsButton = () => { + this.setState({ + threeDotsIsFocused: true, + }); + } + + unFocusThreeDotsButton = () => { + this.setState({ + threeDotsIsFocused: false, + }); + } + render() { const {intl} = this.props; const currentTabs = this.props.teams.find((team) => team.name === this.state.activeServerName)?.tabs || []; @@ -513,11 +521,16 @@ class MainPage extends React.PureComponent { {this.props.teams.length !== 0 && ( , State> { openMenu = () => { if (window.process.platform !== 'darwin') { - window.ipcRenderer.send('open-app-menu'); + window.ipcRenderer.send(OPEN_APP_MENU); } }