fix(fe): hotkeys should not be enabled when component is not active

src/client/web/src/common/hotkeys.ts

@@ -37,6 +37,9 @@ export class HotkeyHandler {
   };
 
   handle = (ev: KeyboardEvent) => {
+    ev.preventDefault();
+    ev.stopPropagation();
+
     const hotKey = {
       key: ev.key,
       ctrl: ev.ctrlKey,

src/client/web/src/components/__test__/pane_login.test.tsx

@@ -35,7 +35,8 @@ describe("Login", () => {
       login: coreState.login,
       msg: coreState.msg,
       ui: coreState.ui,
-      update: (updater: (prevState: ICoreState) => ICoreState) => {},
+      enabled: true,
+      update: (updater: (prevState: ICoreState) => ICoreState) => { },
     });
 
     const usersCl = NewMockUsersClient("");

src/client/web/src/components/__test__/panel_files.test.tsx

@@ -33,7 +33,8 @@ describe("FilesPanel", () => {
       msg: coreState.msg,
       login: coreState.login,
       ui: coreState.ui,
-      update: (updater: (prevState: ICoreState) => ICoreState) => {},
+      enabled: true,
+      update: (updater: (prevState: ICoreState) => ICoreState) => { },
     });
 
     return {

src/client/web/src/components/layers.tsx

@@ -30,7 +30,7 @@ export interface Props {
   update?: (updater: (prevState: ICoreState) => ICoreState) => void;
 }
 
-export interface State {}
+export interface State { }
 export class Layers extends React.Component<Props, State, {}> {
   private hotkeyHandler: HotkeyHandler;
   constructor(p: Props) {
@@ -39,11 +39,7 @@ export class Layers extends React.Component<Props, State, {}> {
 
   componentDidMount(): void {
     this.hotkeyHandler = new HotkeyHandler();
-
-    const closeHandler = () => {
-      this.setControlOption(settingsDialogCtrl, ctrlOff);
-    };
-    this.hotkeyHandler.add({ key: "Escape" }, closeHandler);
+    this.hotkeyHandler.add({ key: "Escape" }, this.closeHandler);
 
     document.addEventListener("keyup", this.hotkeyHandler.handle);
   }
@@ -52,18 +48,23 @@ export class Layers extends React.Component<Props, State, {}> {
     document.removeEventListener("keyup", this.hotkeyHandler.handle);
   }
 
+  closeHandler = () => {
+    if (this.props.ui.control.controls.get(settingsDialogCtrl) === ctrlOn) {
+      this.setControlOption(settingsDialogCtrl, ctrlOff);
+    }
+  };
+
   setControlOption = (targetControl: string, option: string) => {
     updater().setControlOption(targetControl, option);
     this.props.update(updater().updateUI);
   };
 
   render() {
-    const showLogin =
-      this.props.login.authed ||
+    const hideLogin = this.props.login.authed ||
       (this.props.ui.control.controls.get(sharingCtrl) === ctrlOn &&
-        this.props.filesInfo.isSharing)
-        ? "hidden"
-        : "";
+        this.props.filesInfo.isSharing);
+    const loginPaneClass = hideLogin ? "hidden" : "";
+
     const showSettings =
       this.props.ui.control.controls.get(settingsDialogCtrl) === ctrlOn
         ? ""
@@ -79,13 +80,14 @@ export class Layers extends React.Component<Props, State, {}> {
           <LoadingIcon />
         </div>
 
-        <div id="login-layer" className={`layer ${showLogin}`}>
+        <div id="login-layer" className={`layer ${loginPaneClass}`}>
           <div id="root-container">
             <AuthPane
               login={this.props.login}
               ui={this.props.ui}
               update={this.props.update}
               msg={this.props.msg}
+              enabled={!hideLogin}
             />
           </div>
         </div>

src/client/web/src/components/pane_login.tsx

@@ -28,6 +28,7 @@ export interface Props {
   login: LoginProps;
   msg: MsgProps;
   ui: UIProps;
+  enabled: boolean;
   update?: (updater: (prevState: ICoreState) => ICoreState) => void;
 }
 
@@ -57,11 +58,17 @@ export class AuthPane extends React.Component<Props, State, {}> {
     this.hotkeyHandler = new HotkeyHandler();
     this.hotkeyHandler.add({ key: "Enter" }, this.login);
 
-    document.addEventListener("keyup", this.hotkeyHandler.handle);
+    document.addEventListener("keyup", this.handleHotKey);
   }
 
   componentWillUnmount() {
-    document.removeEventListener("keyup", this.hotkeyHandler.handle);
+    document.removeEventListener("keyup", this.handleHotKey);
+  }
+
+  handleHotKey = (ev: KeyboardEvent) => {
+    if (this.props.enabled) {
+      this.hotkeyHandler.handle(ev);
+    }
   }
 
   changeUser = (ev: React.ChangeEvent<HTMLInputElement>) => {

src/client/web/src/components/panel_files.tsx

@@ -61,6 +61,7 @@ export interface Props {
   msg: MsgProps;
   login: LoginProps;
   ui: UIProps;
+  enabled: boolean;
   update?: (updater: (prevState: ICoreState) => ICoreState) => void;
 }
 
@@ -100,6 +101,10 @@ export class FilesPanel extends React.Component<Props, State, {}> {
       this.uploadInput = ReactDOM.findDOMNode(input);
     };
     this.onClickUpload = () => {
+      if (!this.props.enabled) {
+        return;
+      }
+
       const uploadInput = this.uploadInput as HTMLButtonElement;
       uploadInput.click();
     };
@@ -227,6 +232,10 @@ export class FilesPanel extends React.Component<Props, State, {}> {
   };
 
   delete = async () => {
+    if (!this.props.enabled) {
+      return;
+    }
+
     // TODO: selected should be cleaned after change the cwd
     if (this.props.filesInfo.dirPath.join("/") !== this.state.selectedSrc) {
       alertMsg(this.props.msg.pkg.get("browser.del.fail"));
@@ -239,8 +248,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
       const filesToDel = this.state.selectedItems.keySeq().join(", ");
       if (
         !confirmMsg(
-          `${this.props.msg.pkg.get("op.confirm")} [${
-            this.state.selectedItems.size
+          `${this.props.msg.pkg.get("op.confirm")} [${this.state.selectedItems.size
           }]: ${filesToDel}`
         )
       ) {
@@ -284,6 +292,10 @@ export class FilesPanel extends React.Component<Props, State, {}> {
   };
 
   moveHere = async () => {
+    if (!this.props.enabled) {
+      return;
+    }
+
     const oldDir = this.state.selectedSrc;
     const newDir = this.props.filesInfo.dirPath.join("/");
     if (oldDir === newDir) {
@@ -377,6 +389,10 @@ export class FilesPanel extends React.Component<Props, State, {}> {
   };
 
   selectAll = () => {
+    if (!this.props.enabled) {
+      return;
+    }
+
     let newSelected = Map<string, boolean>();
     const someSelected = this.state.selectedItems.size === 0 ? true : false;
     if (someSelected) {
@@ -901,7 +917,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
       Math.trunc(
         parseInt(this.props.login.extInfo.usedSpace, 10) / (1024 * 1024)
       ) *
-        (1024 * 1024),
+      (1024 * 1024),
       {
         round: 0,
       }
@@ -911,7 +927,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
       Math.trunc(
         parseInt(this.props.login.quota.spaceLimit, 10) / (1024 * 1024)
       ) *
-        (1024 * 1024),
+      (1024 * 1024),
       {
         round: 0,
       }

src/client/web/src/components/root_frame.tsx

@@ -25,7 +25,7 @@ export interface Props {
   update?: (updater: (prevState: ICoreState) => ICoreState) => void;
 }
 
-export interface State {}
+export interface State { }
 export class RootFrame extends React.Component<Props, State, {}> {
   constructor(p: Props) {
     super(p);
@@ -114,6 +114,7 @@ export class RootFrame extends React.Component<Props, State, {}> {
                 msg={this.props.msg}
                 login={this.props.login}
                 ui={this.props.ui}
+                enabled={displaying === "filesPanel"}
                 update={this.props.update}
               />
             </span>