FIX: Focus was sometimes lost after inserting a new row and pressing tab in grid 2023.1

frontend-html/src/gui/Components/ScreenElements/Editors/ColorEditor.tsx

@@ -34,7 +34,7 @@ export default class ColorEditor extends React.Component<{
   isReadOnly?: boolean;
   onChange?: (value: string | null) => void;
   onFocus?: () => void;
-  onBlur?: () => void;
+  onBlur?: (event: any) => void;
   onKeyDown?(event: any): void;
   subscribeToFocusManager?: (obj: IFocusable) => void;
 }> {
@@ -68,7 +68,7 @@ export default class ColorEditor extends React.Component<{
   }
 
   componentWillUnmount() {
-    this.props.onBlur?.();
+    this.props.onBlur?.({target: this.elmInput});
   }
 
   machine = interpret(
@@ -175,7 +175,7 @@ export default class ColorEditor extends React.Component<{
             this.elmInput?.select();
           },
           signalComponentBlur: (ctx, event) => {
-            this.props.onBlur?.();
+            this.props.onBlur?.({target: this.elmInput});
           },
         },
         guards: {

frontend-html/src/gui/Components/ScreenElements/Editors/DateTimeEditor/DateTimeEditor.tsx

@@ -121,7 +121,7 @@ export class DateTimeEditor extends React.Component<{
   }
 
   componentWillUnmount() {
-    this.props.onEditorBlur?.(null);
+    this.props.onEditorBlur?.({target: this.elmInput});
     this.disposers.forEach((d) => d());
   }
 

frontend-html/src/gui/Components/ScreenElements/Editors/NumberEditor.tsx

@@ -102,7 +102,7 @@ export class NumberEditor extends React.Component<{
   }
 
   componentWillUnmount() {
-    this.handleBlur(null);
+    this.handleBlur({target: this.inputRef.current});
     this.disposer?.();
   }
 

frontend-html/src/gui/Components/ScreenElements/Editors/TagInputEditor.tsx

@@ -123,7 +123,7 @@ export const TagInputEditor = inject(({property}: { property: IProperty }, {valu
 
       useEffect(() => {
         return () => {
-         props.onEditorBlur?.(null);
+         props.onEditorBlur?.({target: beh.elmInputElement});
         }
       }, []);
 

frontend-html/src/gui/Components/ScreenElements/Editors/TextEditor.tsx

@@ -102,7 +102,7 @@ export class TextEditor extends React.Component<{
   }
 
   componentWillUnmount() {
-    this.props.onEditorBlur?.(null);
+    this.props.onEditorBlur?.({target: this.elmInput});
     this.disposers.forEach((d) => d());
   }
 

frontend-html/src/gui/Components/ScreenElements/Table/Scroller.tsx

@@ -102,6 +102,10 @@ export default class Scroller extends React.Component<IScrollerProps> {
 
   public focus() {
     setTimeout(()=>{
+      if(this.elmScrollerDiv?.style["width"] === "0px"){
+        console.warn("Focus was requested on an invisible table. This should not happen.");
+        return;
+      }
       requestFocus(this.elmScrollerDiv);
     });
   }

frontend-html/src/gui/Workbench/ScreenArea/TableView/TableViewEditor.tsx

@@ -63,11 +63,13 @@ import S from "./TableViewEditor.module.scss";
         property: actualProperty,
         value: value,
       }),
-    onEditorBlur: async () => {
+    onEditorBlur: async (event: any) => {
       await onFieldBlur(tablePanelView)();
       const gridFocusManager = getGridFocusManager(tablePanelView);
-      gridFocusManager.activeEditor = undefined;
-      gridFocusManager.editorBlur = undefined;
+      if(!event?.target || gridFocusManager.activeEditor === event.target){
+        gridFocusManager.activeEditor = undefined;
+        gridFocusManager.editorBlur = undefined;
+      }
     },
     onEditorKeyDown: (event: any) => {
       event.persist();
@@ -80,7 +82,7 @@ export class TableViewEditor extends React.Component<{
   property?: IProperty;
   getCellValue?: () => any;
   onChange?: (event: any, value: any) => Promise<void>;
-  onEditorBlur?: () => Promise<void>;
+  onEditorBlur?: (event: any) => Promise<void>;
   onEditorKeyDown?: (event: any) => void;
 }> {
 
@@ -202,10 +204,12 @@ export class TableViewEditor extends React.Component<{
             customStyle={resolveCellAlignment(this.props.property?.style, isFirstColumn, "Text")}
             foregroundColor={foregroundColor}
             backgroundColor={backgroundColor}
-            onBlur={()=>{
+            onBlur={(target: any)=>{
               const gridFocusManager = getGridFocusManager(dataView);
-              gridFocusManager.activeEditor = undefined;
-              gridFocusManager.editorBlur = undefined;
+              if(gridFocusManager.activeEditor === target){
+                gridFocusManager.activeEditor = undefined;
+                gridFocusManager.editorBlur = undefined;
+              }
             }}
             autoSort={this.props.property!.autoSort}
             onKeyDown={this.props.onEditorKeyDown}
@@ -221,7 +225,7 @@ export class TableViewEditor extends React.Component<{
           <ColorEditor
             value={flashColor2htmlColor(this.props.getCellValue!()) || null}
             onChange={(value) => this.props.onChange?.(undefined, htmlColor2FlashColor(value))}
-            onBlur={() => this.props.onEditorBlur?.()}
+            onBlur={(event: any) => this.props.onEditorBlur?.(event)}
             onKeyDown={this.props.onEditorKeyDown}
             isReadOnly={readOnly}
             subscribeToFocusManager={(editor) =>

frontend-html/src/model/actions/DataLoading/processCRUDResult.ts

@@ -80,9 +80,9 @@ export function*processCRUDResult(ctx: any, result: ICRUDResult,
           dataView.reselectOrSelectFirst();
         }
         dataView.formFocusManager.stopAutoFocus();
-        const focusManager = getFocusManager(dataView);
-        focusManager.setFocus();
       }
+      const screenFocusManager = getFocusManager(ctx);
+      screenFocusManager.setFocus();
       getFormScreen(ctx).setDirty(true);
       break;
     }

frontend-html/src/model/entities/GridFocusManager.ts

@@ -40,7 +40,7 @@ export class GridFocusManager {
     this.focusEditor();
   }
 
-  editorBlur?: () => Promise<void>
+  editorBlur?: (event?: any) => Promise<void>
 
   async activeEditorCloses(){
     if(this.editorBlur){

frontend-html/src/modules/Editors/DropdownEditor/DropdownEditor.tsx

@@ -97,7 +97,7 @@ export function XmlBuildDropdownEditor(props: {
   onTextOverflowChanged?: (toolTip: string | null | undefined) => void;
   onDoubleClick?: (event: any) => void;
   onClick?: (event: any) => void;
-  onBlur?: () => void;
+  onBlur?: (target: any) => void;
   subscribeToFocusManager?: (obj: IFocusable) => void;
   onKeyDown?(event: any): void;
 }) {

frontend-html/src/modules/Editors/DropdownEditor/DropdownEditorBehavior.tsx

@@ -54,7 +54,7 @@ export interface IBehaviorData {
   isReadOnly: boolean,
   onDoubleClick?: (event: any) => void,
   onClick?: (event: any) => void,
-  onBlur?: () => void,
+  onBlur?: (target: any) => void,
   subscribeToFocusManager?: (obj: IFocusable) => void,
   onKeyDown?: (event: any) => void,
   autoSort?: boolean,
@@ -71,7 +71,7 @@ export class DropdownEditorBehavior implements IDropdownEditorBehavior{
   public isReadOnly: boolean;
   public onDoubleClick?: (event: any) => void;
   public onClick?: (event: any) => void;
-  public onBlur?: () => void;
+  public onBlur?: (target?: any) => void;
   public subscribeToFocusManager?: (obj:IFocusable) => void;
   private onKeyDown?: (event: any) => void;
   private autoSort?: boolean;

frontend-html/src/modules/Editors/DropdownEditor/DropdownEditorInput.tsx

@@ -42,7 +42,7 @@ export function DropdownEditorInput(props: {
       beh.subscribeToFocusManager(beh.elmInputElement);
     }
     beh.updateTextOverflowState();
-    return ()=> beh.onBlur?.();
+    return ()=> beh.onBlur?.(beh.elmInputElement);
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {