FIX: Search input focus 2024.3 (#2552)

* requestFocus function used in more places * Revert "ModalWindow was moved after displayed"
origam · Mar 27, 2024 · e6add90 · e6add90
1 parent 8aff6f7
commit e6add90
Show file tree

Hide file tree

Showing 7 changed files with 10 additions and 17 deletions.
diff --git a/frontend-html/src/gui/Components/Dialogs/ChangeMasterRecordDialog.tsx b/frontend-html/src/gui/Components/Dialogs/ChangeMasterRecordDialog.tsx
@@ -22,6 +22,7 @@ import React from "react";
 import CS from "./DialogsCommon.module.css";
 import { T } from "../../../utils/translation";
 import { ModalDialog } from "gui/Components/Dialog/ModalDialog";
+import { requestFocus } from "utils/focus";
 
 @observer
 export class ChangeMasterRecordDialog extends React.Component<{
@@ -36,7 +37,7 @@ export class ChangeMasterRecordDialog extends React.Component<{
   componentDidMount() {
     setTimeout(() => {
       if (this.elmPrimaryBtn) {
-        this.elmPrimaryBtn.focus?.();
+        requestFocus(this.elmPrimaryBtn);
       }
     }, 159);
   }

diff --git a/frontend-html/src/gui/Components/Dialogs/ModalWindow.tsx b/frontend-html/src/gui/Components/Dialogs/ModalWindow.tsx
@@ -61,30 +61,20 @@ export class ModalWindow extends React.Component<{
     return this._left;
   }
   @observable isDragging = false;
-  @observable
-  isHidden = true;
 
   reportingWindowMove = false;
   dragStartMouseX = 0;
   dragStartMouseY = 0;
   dragStartPosX = 0;
   dragStartPosY = 0;
 
-  timeout: NodeJS.Timeout | undefined;
-  contentRect?: { bounds: BoundingRect };
-
   @action.bound handleResize(contentRect: { bounds: BoundingRect }) {
     if (this.props.topPosiotionProc) {
       this.top = window.innerHeight * this.props.topPosiotionProc / 100;
     } else {
       this.top = window.innerHeight / 2 - contentRect.bounds!.height / 2;
     }
     this.left = window.innerWidth / 2 - contentRect.bounds!.width / 2;
-
-    clearTimeout(this.timeout);
-    this.timeout = setTimeout(() => {
-      this.isHidden = false;
-    }, 20);
   }
 
   @action.bound handleTitleMouseDown(event: any) {
@@ -193,7 +183,6 @@ export class ModalWindow extends React.Component<{
                   left: this.props.fullScreen ? 0 : this.left,
                   minWidth: this.props.fullScreen ? "100%" : this.props.width,
                   minHeight: this.props.fullScreen ? "100%" : this.props.height,
-                  visibility: this.isHidden ? "hidden" : undefined
                 }}
                 tabIndex={0}
                 onKeyDown={(event: any) => this.onKeyDown(event)}

diff --git a/frontend-html/src/gui/Components/Dialogs/QuestionLogoutWithDirtyData.tsx b/frontend-html/src/gui/Components/Dialogs/QuestionLogoutWithDirtyData.tsx
@@ -22,6 +22,7 @@ import { observer } from "mobx-react";
 import CS from "./DialogsCommon.module.css";
 import { T } from "../../../utils/translation";
 import { ModalDialog } from "gui/Components/Dialog/ModalDialog";
+import { requestFocus } from "utils/focus";
 
 @observer
 export class QuestionLogoutWithDirtyData extends React.Component<{
@@ -34,7 +35,7 @@ export class QuestionLogoutWithDirtyData extends React.Component<{
   componentDidMount() {
     setTimeout(() => {
       if (this.elmPrimaryBtn) {
-        this.elmPrimaryBtn.focus?.();
+        requestFocus(this.elmPrimaryBtn);
       }
     }, 150);
   }

diff --git a/frontend-html/src/gui/Components/Dialogs/QuestionSaveData.tsx b/frontend-html/src/gui/Components/Dialogs/QuestionSaveData.tsx
@@ -22,6 +22,7 @@ import { observer } from "mobx-react";
 import CS from "./DialogsCommon.module.css";
 import { T } from "../../../utils/translation";
 import { ModalDialog } from "gui/Components/Dialog/ModalDialog";
+import { requestFocus } from "utils/focus";
 
 @observer
 export class QuestionSaveData extends React.Component<{
@@ -36,7 +37,7 @@ export class QuestionSaveData extends React.Component<{
   componentDidMount() {
     setTimeout(() => {
       if (this.elmPrimaryBtn) {
-        this.elmPrimaryBtn.focus?.();
+         requestFocus(this.elmPrimaryBtn);
       }
     }, 150);
   }

diff --git a/frontend-html/src/gui/Components/Dialogs/YesNoQuestion.tsx b/frontend-html/src/gui/Components/Dialogs/YesNoQuestion.tsx
@@ -21,6 +21,7 @@ import { MobXProviderContext, observer } from "mobx-react";
 import React from "react";
 import CS from "gui/Components/Dialogs/DialogsCommon.module.css";
 import { ModalDialog } from "gui/Components/Dialog/ModalDialog";
+import { requestFocus } from "utils/focus";
 
 @observer
 export class YesNoQuestion extends React.Component<{
@@ -38,7 +39,7 @@ export class YesNoQuestion extends React.Component<{
   componentDidMount() {
     setTimeout(() => {
       if (this.elmPrimaryBtn) {
-        this.elmPrimaryBtn.focus?.();
+        requestFocus(this.elmPrimaryBtn);
       }
     }, 150);
   }

diff --git a/frontend-html/src/gui/Components/ScreenElements/Editors/TagInputEditor.tsx b/frontend-html/src/gui/Components/ScreenElements/Editors/TagInputEditor.tsx
@@ -102,7 +102,7 @@ export const TagInputEditor = inject(({property}: { property: IProperty }, {valu
           beh.subscribeToFocusManager(beh.elmInputElement);
         }
         if (props.autoFocus) {
-          setTimeout(() => inputElement?.focus());
+          setTimeout(() => requestFocus(inputElement));
         }
       }, [beh, inputElement, props.autoFocus]);
 

diff --git a/frontend-html/src/model/entities/FormFocusManager.ts b/frontend-html/src/model/entities/FormFocusManager.ts
@@ -90,7 +90,7 @@ export class FormFocusManager {
   forceAutoFocus() {
     if (this.focusableContainers.length === 0 && this.backupFocusPlaceholder) {
       setTimeout(() => {
-        this.backupFocusPlaceholder?.focus();
+        requestFocus(this.backupFocusPlaceholder);
       }, 0);
       return;
     }