TileTable: fix focus handling

The tile table should only show selection and menubar if the focus
is inside the tile. This broke because the table data now has the focus
and not the container.

The change also fixes a bug, that was already there before the focus
refactoring:
When the table is focused and tab pressed, the focus went to the body
instead of focusing the first menubar item. This happened because the
menubar was made invisible as soon as focus left the table. Now, the
menubar is only made invisible, when the focus leaves the tile, it may
be on the table data, a menu bar item, a header item or the text filter.
However, hiding the menubar cannot be done in the focusout handler
because the menubar still has the focus. So it needs to be done later.
RestoreFocusLater is the preferred method for such focus related
actions to prevent flickering, see also comment in
focusUtils.restoreFocusLater.

450639

Author: cguglielmo

eclipse-scout-core/src/tile/fields/tablefield/TileTableField.less

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2010, 2024 BSI Business Systems Integration AG
+ * Copyright (c) 2010, 2026 BSI Business Systems Integration AG
  *
  * This program and the accompanying materials are made
  * available under the terms of the Eclipse Public License 2.0
@@ -42,9 +42,8 @@
     border-radius: 0;
     background-color: transparent;
 
-    &:focus,
-    &.focused {
-      box-shadow: none;
+    &:has(.table-data:is(:focus, .focused)) {
+      box-shadow: none !important;
     }
 
     & > .table-header {
@@ -86,21 +85,21 @@
       }
     }
 
-    &:not(:focus):not(.focused) > .table-data > .table-row.selected {
-      /* No selection color for non-focused table tiles */
-      background-color: transparent;
-
-      &::after {
-        border: 0;
-      }
-    }
-
     & > .table-data {
       & + .scroll-shadow {
         .scroll-shadow.gradient();
         --scroll-shadow-color: var(--tile-background-color);
       }
 
+      &:not(:is(:focus, .focused)) > .table-row.selected {
+        /* No selection color for non-focused table tiles */
+        background-color: transparent;
+
+        &::after {
+          border: 0;
+        }
+      }
+
       & > .table-row {
         & > .table-cell,
         & > .table-cell > .font-icon {

eclipse-scout-core/src/tile/fields/tablefield/TileTableField.ts

@@ -1,35 +1,41 @@
 /*
- * Copyright (c) 2010, 2023 BSI Business Systems Integration AG
+ * Copyright (c) 2010, 2026 BSI Business Systems Integration AG
  *
  * This program and the accompanying materials are made
  * available under the terms of the Eclipse Public License 2.0
  * which is available at https://www.eclipse.org/legal/epl-2.0/
  *
  * SPDX-License-Identifier: EPL-2.0
  */
-import {EventHandler, FormFieldTile, MenuBar, PropertyChangeEvent, TableField} from '../../../index';
+import {EventHandler, focusUtils, FormFieldTile, MenuBar, PropertyChangeEvent, TableField} from '../../../index';
 import $ from 'jquery';
 
 export class TileTableField extends TableField {
-  protected _tableBlurHandler: (event: JQuery.BlurEvent) => void;
-  protected _tableFocusHandler: (event: JQuery.FocusEvent) => void;
   protected _menuBarPropertyChangeHandler: EventHandler<PropertyChangeEvent<any, MenuBar>>;
   protected _documentMouseDownHandler: (event: MouseEvent) => void;
 
   constructor() {
     super();
 
-    this._tableBlurHandler = this._onTableBlur.bind(this);
-    this._tableFocusHandler = this._onTableFocus.bind(this);
     this._menuBarPropertyChangeHandler = this._onMenuBarPropertyChange.bind(this);
     this._documentMouseDownHandler = this._onDocumentMouseDown.bind(this);
   }
 
   protected override _render() {
     super._render();
+    if ((this.parent as FormFieldTile).displayStyle !== FormFieldTile.DisplayStyle.DASHBOARD) {
+      return;
+    }
+
     if (!this.session.focusManager.restrictedFocusGain) {
       this.$container.document(true).addEventListener('mousedown', this._documentMouseDownHandler, true);
     }
+    this.$container
+      .on('focusout', this._onTileFocusOut.bind(this))
+      .on('focusin', this._onTileFocusIn.bind(this));
+    if (!focusUtils.isOrHasActiveElement(this.$container)) {
+      this._hideMenuBar(true);
+    }
   }
 
   protected override _remove() {
@@ -43,14 +49,8 @@ export class TileTableField extends TableField {
       return;
     }
     if (this.table) {
-      this.table.$container
-        .on('blur', this._tableBlurHandler)
-        .on('focus', this._tableFocusHandler);
       this.table.menuBar.on('propertyChange', this._menuBarPropertyChangeHandler);
       this._toggleHasMenuBar();
-      if (document.activeElement !== this.table.$container[0]) {
-        this._hideMenuBar(true);
-      }
     }
   }
 
@@ -59,28 +59,39 @@ export class TileTableField extends TableField {
       return;
     }
     if (this.table) {
-      this.table.$container
-        .off('blur', this._tableBlurHandler)
-        .off('focus', this._tableFocusHandler);
       this.table.menuBar.off('propertyChange', this._menuBarPropertyChangeHandler);
     }
     super._removeTable();
   }
 
-  protected _onTableBlur(event: JQuery.BlurEvent) {
+  protected _onTileFocusOut(event: JQuery.FocusOutEvent) {
+    if (this.$container.isOrHas(event.relatedTarget as Element)) {
+      // If focus stays in tile, don't remove menubar
+      return;
+    }
     let popup = $('.popup').data('widget');
 
-    // hide menu bar if context menu popup is not attached to TileTableField
-    if (!this.has(popup)) {
-      this._hideMenuBar(true);
-    }
+    // Hide menu bar when focus leaves tile, but only if there is no popup open that belongs to the table (e.g. context menu or table header popup)
+    // If a popup is open, the focus is on the popup but the menubar should still be visible
+    requestAnimationFrame(() => {
+      if (!this.rendered) {
+        return;
+      }
+
+      if (!this.has(popup)) {
+        this._hideMenuBar(true);
+      }
+    });
   }
 
-  protected _onTableFocus(event: JQuery.FocusEvent) {
+  protected _onTileFocusIn(event: JQuery.FocusInEvent) {
     this._hideMenuBar(false);
   }
 
   protected _hideMenuBar(hiddenByUi: boolean) {
+    if (!this.table) {
+      return;
+    }
     this.table.menuBar.hiddenByUi = hiddenByUi;
     this.table.menuBar.updateVisibility();
   }