@eclipse-scout/core 22.0.29 → 22.0.34

package/dist/file-list

@@ -1,9 +1,9 @@
-eclipse-scout-core-111d2d090dfd2183238f.min.js
-eclipse-scout-core-111d2d090dfd2183238f.min.js.map
-eclipse-scout-core-theme-dark-fd0e080c10f65e67b68b.min.css
+eclipse-scout-core-0c86d1e671be93def26c.min.js
+eclipse-scout-core-0c86d1e671be93def26c.min.js.map
+eclipse-scout-core-theme-dark-17a1d77d53510e113a3c.min.css
 eclipse-scout-core-theme-dark.css
 eclipse-scout-core-theme-dark.css.map
-eclipse-scout-core-theme-f3a61fbc12acf8e27fcc.min.css
+eclipse-scout-core-theme-dfed415a6b7fb17f3f4c.min.css
 eclipse-scout-core-theme.css
 eclipse-scout-core-theme.css.map
 eclipse-scout-core.js

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eclipse-scout/core",
-  "version": "22.0.29",
+  "version": "22.0.34",
   "description": "Eclipse Scout runtime",
   "author": "BSI Business Systems Integration AG",
   "homepage": "https://www.eclipse.org/scout",
@@ -26,7 +26,7 @@
     "src"
   ],
   "devDependencies": {
-    "@eclipse-scout/cli": "22.0.29",
+    "@eclipse-scout/cli": "22.0.34",
     "@eclipse-scout/releng": "^22.0.0",
     "jasmine-core": "3.10.1",
     "jasmine-ajax": "4.0.0",

package/src/App.js

@@ -3,7 +3,7 @@
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
- * http://www.eclipse.org/legal/epl-v10.html
+ * https://www.eclipse.org/legal/epl-v10.html
  *
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
@@ -341,8 +341,9 @@ export default class App {
     // Bluebird has a polyfill -> can it be ported to jQuery?
   }
 
-  _createErrorHandler() {
-    return scout.create('ErrorHandler');
+  _createErrorHandler(opts) {
+    opts = $.extend({}, opts);
+    return scout.create('ErrorHandler', opts);
   }
 
   /**
@@ -459,16 +460,33 @@ export default class App {
     $.log.error('App initialization failed.');
     this.setLoading(false);
 
-    return this.errorHandler.handle(error, ...args)
-      .then(errorInfo => {
-        let $error = $('body').appendDiv('startup-error');
-        $error.appendDiv('startup-error-title').text('The application could not be started');
-        if (errorInfo.message) {
-          $error.appendDiv('startup-error-message').text(errorInfo.message);
-        }
-        // Reject with original rejection arguments
-        return $.rejectedPromise(error, ...args);
-      });
+    let promises = [];
+    if (this.sessions.length === 0) {
+      promises.push(this.errorHandler.handle(error, ...args)
+        .then(errorInfo => {
+          this._appendStartupError($('body'), errorInfo.message);
+        }));
+    } else {
+      // Session.js may already display a fatal message box
+      // -> don't handle the error again and display multiple error messages
+      this.sessions
+        .filter(session => !session.ready && !session.isFatalMessageShown())
+        .forEach(session => {
+          session.$entryPoint.empty();
+          promises.push(this._createErrorHandler({session: session}).handle(error));
+        });
+    }
+
+    // Reject with original rejection arguments
+    return $.promiseAll(promises).then(errorInfo => $.rejectedPromise(error, ...args));
+  }
+
+  _appendStartupError($parent, message) {
+    let $error = $parent.appendDiv('startup-error');
+    $error.appendDiv('startup-error-title').text('The application could not be started');
+    if (message) {
+      $error.appendDiv('startup-error-message').text(message);
+    }
   }
 
   /**
@@ -517,13 +535,3 @@ export default class App {
     return this.events.when(type);
   }
 }
-/*
- * Copyright (c) 2010-2019 BSI Business Systems Integration AG.
- * All rights reserved. This program and the accompanying materials
- * are made available under the terms of the Eclipse Public License v1.0
- * which accompanies this distribution, and is available at
- * http://www.eclipse.org/legal/epl-v10.html
- *
- * Contributors:
- *     BSI Business Systems Integration AG - initial API and implementation
- */

package/src/ErrorHandler.js

@@ -19,6 +19,7 @@ export default class ErrorHandler {
     this.displayError = true;
     this.sendError = false;
     this.windowErrorHandler = this._onWindowError.bind(this);
+    this.session = null;
   }
 
   /**
@@ -264,8 +265,8 @@ export default class ErrorHandler {
     // Note: The error handler is installed globally and we cannot tell in which scout session the error happened.
     // We simply use the first scout session to display the message box and log the error. This is not ideal in the
     // multi-session-case (portlet), but currently there is no other way. Besides, this feature is not in use yet.
-    if (App.get().sessions.length > 0) {
-      let session = App.get().sessions[0];
+    let session = this.session || App.get().sessions[0];
+    if (session) {
       if (this.displayError && errorInfo.level === logging.Level.ERROR) {
         this._showMessageBox(session, errorInfo.message, errorInfo.code, errorInfo.log);
       }

package/src/RemoteApp.js

@@ -1,9 +1,9 @@
 /*
- * Copyright (c) 2014-2018 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
- * http://www.eclipse.org/legal/epl-v10.html
+ * https://www.eclipse.org/legal/epl-v10.html
  *
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
@@ -31,10 +31,11 @@ export default class RemoteApp extends App {
     defaultValues.bootstrap();
   }
 
-  _createErrorHandler() {
-    return scout.create('ErrorHandler', {
+  _createErrorHandler(opts) {
+    opts = $.extend({
       sendError: true
-    });
+    }, opts);
+    return super._createErrorHandler(opts);
   }
 
   /**
@@ -47,12 +48,4 @@ export default class RemoteApp extends App {
     App.get().sessions.push(session);
     return session.start();
   }
-
-  _fail(options, error, ...args) {
-    $.log.error('App initialization failed', error);
-    this.setLoading(false);
-    // Session.js already handled the error -> don't show a message here
-    // Reject with original rejection arguments
-    return $.rejectedPromise(error, ...args);
-  }
 }

package/src/desktop/outline/Outline.js

@@ -1,9 +1,9 @@
 /*
- * Copyright (c) 2010-2021 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
- * http://www.eclipse.org/legal/epl-v10.html
+ * https://www.eclipse.org/legal/epl-v10.html
  *
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
@@ -482,6 +482,7 @@ export default class Outline extends Tree {
     }
     this._setProperty('defaultDetailForm', defaultDetailForm);
     if (this.defaultDetailForm) {
+      this.defaultDetailForm.setClosable(false);
       this.defaultDetailForm.detailForm = true;
     }
     if (this.initialized) {

package/src/desktop/outline/Outline.less

@@ -322,6 +322,7 @@
       &.selected {
         display: flex;
         flex-wrap: wrap; // Move detail menubar to next line
+        background-clip: content-box; // selection background shines through on the bottom of the node sometimes when zoomed -> makes it slightly better
       }
 
       &.child-of-selected.animate-prev-selected {

package/src/desktop/outline/OutlineLayout.js

@@ -23,7 +23,7 @@ export default class OutlineLayout extends TreeLayout {
 
     super._layout($container);
 
-    containerSize = htmlContainer.availableSize()
+    containerSize = htmlContainer.availableSize({exact: true})
       .subtract(htmlContainer.insets());
 
     if (this.outline.embedDetailContent) {

package/src/desktop/outline/PageLayout.js

@@ -31,7 +31,7 @@ export default class PageLayout extends AbstractLayout {
       detailMenuBarHeight = 0,
       textWidth = 0;
 
-    containerSize = htmlContainer.availableSize()
+    containerSize = htmlContainer.availableSize({exact: true}) // exact is important to calculate text width correctly and to prevent node menubar from wrapping
       .subtract(htmlContainer.insets());
     textWidth = containerSize.width;
 
@@ -93,7 +93,9 @@ export default class PageLayout extends AbstractLayout {
     // needs a width to be able to calculate the pref height
     textHeight = graphics.prefSize($text, {
       includeMargin: true,
-      widthHint: textWidth
+      widthHint: textWidth,
+      enforceSizeHints: true,
+      exact: true
     }).height;
 
     if ($icon.length > 0) {
@@ -106,6 +108,7 @@ export default class PageLayout extends AbstractLayout {
     }
     if (this.outline.detailContent) {
       let htmlDetailContent = this.outline.detailContent.htmlComp;
+      options = $.extend({}, options, {enforceSizeHints: true, exact: true});
       detailContentPrefSize = htmlDetailContent.prefSize(options).add(htmlDetailContent.margins());
     }
 

package/src/keystroke/KeyStroke.js

@@ -8,7 +8,7 @@
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
  */
-import {Action, HAlign, Key, keys, scout} from '../index';
+import {Action, HAlign, Key, keys, scout, Widget} from '../index';
 import $ from 'jquery';
 
 export default class KeyStroke {
@@ -134,24 +134,29 @@ export default class KeyStroke {
   _isEnabled() {
     // Hint: do not check for which.length because there are keystrokes without a which, e.g. RangeKeyStroke.js
 
-    if (this.field) {
-      // Check visibility
-      if (this.field.visible !== undefined && !this.field.visible) {
-        return false;
-      }
-      // Check enabled state (if inheritAccessibility is true)
-      if (!this.inheritAccessibility) {
-        return true;
-      }
-      if (this.field.enabledComputed !== undefined) {
-        return this.field.enabledComputed;
-      }
-      if (this.field.enabled !== undefined) {
-        // This should actually not happen because this.field should always be a hypothetical case if this.field is not a widget
-        return this.field.enabled;
-      }
+    if (!this.field) {
+      return true;
+    }
+    if (this.field instanceof Widget && this.field.isRemovalPending()) {
+      // Prevent possible exceptions or unexpected behavior if a keystroke is executed while a widget is being removed.
+      return false;
+    }
+    // Check visibility
+    if (this.field.visible !== undefined && !this.field.visible) {
+      return false;
+    }
+    // Check enabled state (if inheritAccessibility is true)
+    if (!this.inheritAccessibility) {
+      return true;
+    }
+    if (this.field.enabledComputed !== undefined) {
+      return this.field.enabledComputed;
+    }
+    if (this.field.enabled !== undefined) {
+      // This should actually not happen because this.field should always be a widget
+      return this.field.enabled;
     }
-    return true;
+    return false;
   }
 
   /**

package/src/layout/graphics.js

@@ -8,7 +8,7 @@
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
  */
-import {arrays, Device, Dimension, Insets, Point, Rectangle, scout, scrollbars} from '../index';
+import {arrays, Dimension, Insets, objects, Point, Rectangle, scout, scrollbars} from '../index';
 import $ from 'jquery';
 
 /**
@@ -35,6 +35,10 @@ import $ from 'jquery';
  *
  * heightHint               undefined       Same as 'widthHint' but for the height.
  *
+ * enforceSizeHints         false           Sets min/max-width/height in addition to with width/height if widthHint resp. heightHint is set.
+ *                                          The browser sometimes makes the element smaller or larger than specified by width/height, especially in a flex container.
+ *                                          To prevent that, set this option to true. Default is false, but may change in the future.
+ *
  * restoreScrollPositions   true            By default, the $elem's scrolling position is saved and restored
  *                                          during the execution of this method (because applying
  *                                          intermediate styles for measurement might change the current
@@ -96,6 +100,16 @@ export function prefSize($elem, options) {
     'width': newWidth,
     'height': newHeight
   };
+  if (scout.nvl(options.enforceSizeHints, false)) {
+    if (objects.isNumber(newWidth)) {
+      cssProperties['max-width'] = newWidth;
+      cssProperties['min-width'] = newWidth;
+    }
+    if (objects.isNumber(newHeight)) {
+      cssProperties['max-height'] = newHeight;
+      cssProperties['min-height'] = newHeight;
+    }
+  }
 
   // modify properties which prevent reading the preferred size
   $elem.css(cssProperties);

package/src/main.less

@@ -501,6 +501,7 @@ a,
   padding: 20px;
   border: 1px solid @error-border-color;
   background-color: @error-background-color;
+  border-radius: @border-radius-large;
 }
 
 .startup-error-title {

package/src/popup/Popup.js

@@ -3,7 +3,7 @@
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
- * http://www.eclipse.org/legal/epl-v10.html
+ * https://www.eclipse.org/legal/epl-v10.html
  *
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
@@ -29,6 +29,7 @@ export default class Popup extends Widget {
     this.windowPaddingX = 10;
     this.windowPaddingY = 5;
     this.withGlassPane = false;
+    this._withGlassPane = null;
     this.withFocusContext = true;
     this.initialFocus = () => FocusRule.AUTO;
     this.focusableContainer = false;
@@ -67,12 +68,19 @@ export default class Popup extends Widget {
     // This is necessary because the mousedown listener is attached to the capture phase and therefore executed before any other.
     // If anchor was clicked, popup would already be closed and then opened again -> popup could never be closed by clicking the anchor
     this.closeOnAnchorMouseDown = true;
+    this._closeOnAnchorMouseDown = null;
 
     // Defines whether the popup should be closed on a mouse click outside of the popup
     this.closeOnMouseDownOutside = true;
+    this._closeOnMouseDownOutside = null;
 
     // Defines whether the popup should be closed whenever another popup opens.
     this.closeOnOtherPopupOpen = true;
+    this._closeOnOtherPopupOpen = null;
+
+    // Defines whether the popup should behave like a modal form. If true, the properties closeOnAnchorMouseDown, closeOnMouseDownOutside
+    // and closeOnOtherPopupOpen ore overruled and set to false. The property withGlassPane is overruled too and set to true.
+    this.modal = false;
 
     this._openLater = false;
 
@@ -145,10 +153,8 @@ export default class Popup extends Widget {
     if (options.location) {
       this.anchorBounds = new Rectangle(options.location.x, options.location.y, 0, 0);
     }
-    if (this.withGlassPane) {
-      this._glassPaneRenderer = new GlassPaneRenderer(this);
-    }
     this._setAnchor(this.anchor);
+    this._setModal(this.modal);
   }
 
   /**
@@ -299,6 +305,7 @@ export default class Popup extends Widget {
     this._renderWithArrow();
     this._renderWithFocusContext();
     this._renderWithGlassPane();
+    this._renderModal();
   }
 
   _postRender() {
@@ -383,9 +390,89 @@ export default class Popup extends Widget {
     this.session.focusManager.installFocusContext(this.$container, FocusRule.PREPARE);
   }
 
+  setModal(modal) {
+    this.setProperty('modal', modal);
+  }
+
+  _setModal(modal) {
+    this._setProperty('modal', modal);
+    if (modal) {
+      widgets.preserveAndSetProperty(() => this.setProperty('withGlassPane', true), () => this.withGlassPane, this, '_withGlassPane');
+      widgets.preserveAndSetProperty(() => this.setProperty('closeOnAnchorMouseDown', false), () => this.closeOnAnchorMouseDown, this, '_closeOnAnchorMouseDown');
+      widgets.preserveAndSetProperty(() => this.setProperty('closeOnMouseDownOutside', false), () => this.closeOnMouseDownOutside, this, '_closeOnMouseDownOutside');
+      widgets.preserveAndSetProperty(() => this.setProperty('closeOnOtherPopupOpen', false), () => this.closeOnOtherPopupOpen, this, '_closeOnOtherPopupOpen');
+    } else {
+      widgets.resetProperty(v => this.setWithGlassPane(v), this, '_withGlassPane');
+      widgets.resetProperty(v => this.setCloseOnAnchorMouseDown(v), this, '_closeOnAnchorMouseDown');
+      widgets.resetProperty(v => this.setCloseOnMouseDownOutside(v), this, '_closeOnMouseDownOutside');
+      widgets.resetProperty(v => this.setCloseOnOtherPopupOpen(v), this, '_closeOnOtherPopupOpen');
+    }
+  }
+
+  _renderModal() {
+    this.$container.toggleClass('modal', this.modal);
+  }
+
+  setWithGlassPane(withGlassPane) {
+    if (!this.modal) {
+      this.setProperty('withGlassPane', withGlassPane);
+    } else {
+      this._withGlassPane = withGlassPane;
+    }
+  }
+
   _renderWithGlassPane() {
-    if (this._glassPaneRenderer) {
+    if (this.withGlassPane && !this._glassPaneRenderer) {
+      this._glassPaneRenderer = new GlassPaneRenderer(this);
       this._glassPaneRenderer.renderGlassPanes();
+    } else if (!this.withGlassPane && this._glassPaneRenderer) {
+      this._glassPaneRenderer.removeGlassPanes();
+      this._glassPaneRenderer = null;
+    }
+  }
+
+  setCloseOnMouseDownOutside(closeOnMouseDownOutside) {
+    if (!this.modal) {
+      this.setProperty('closeOnMouseDownOutside', closeOnMouseDownOutside);
+    } else {
+      this._closeOnMouseDownOutside = closeOnMouseDownOutside;
+    }
+  }
+
+  _renderCloseOnMouseDownOutside() {
+    // The listener needs to be executed in the capturing phase -> prevents that _onDocumentMouseDown will be executed right after the popup gets opened using mouse down, otherwise the popup would be closed immediately
+    if (this.closeOnMouseDownOutside && !this._documentMouseDownHandler) {
+      this._documentMouseDownHandler = this._onDocumentMouseDown.bind(this);
+      this.$container.document(true).addEventListener('mousedown', this._documentMouseDownHandler, true); // true=the event handler is executed in the capturing phase
+    } else if (!this.closeOnMouseDownOutside && this._documentMouseDownHandler) {
+      this.$container.document(true).removeEventListener('mousedown', this._documentMouseDownHandler, true);
+      this._documentMouseDownHandler = null;
+    }
+  }
+
+  setCloseOnAnchorMouseDown(closeOnAnchorMouseDown) {
+    if (!this.modal) {
+      this.setProperty('closeOnAnchorMouseDown', closeOnAnchorMouseDown);
+    } else {
+      this._closeOnAnchorMouseDown = closeOnAnchorMouseDown;
+    }
+  }
+
+  setCloseOnOtherPopupOpen(closeOnOtherPopupOpen) {
+    if (!this.modal) {
+      this.setProperty('closeOnOtherPopupOpen', closeOnOtherPopupOpen);
+    } else {
+      this._closeOnOtherPopupOpen = closeOnOtherPopupOpen;
+    }
+  }
+
+  _renderCloseOnOtherPopupOpen() {
+    if (this.closeOnOtherPopupOpen && !this._popupOpenHandler) {
+      this._popupOpenHandler = this._onPopupOpen.bind(this);
+      this.session.desktop.on('popupOpen', this._popupOpenHandler);
+    } else if (!this.closeOnOtherPopupOpen && this._popupOpenHandler) {
+      this.session.desktop.off('popupOpen', this._popupOpenHandler);
+      this._popupOpenHandler = null;
     }
   }
 
@@ -482,17 +569,9 @@ export default class Popup extends Widget {
    */
   _attachCloseHandlers() {
     // Install mouse close handler
-    // The listener needs to be executed in the capturing phase -> prevents that _onDocumentMouseDown will be executed right after the popup gets opened using mouse down, otherwise the popup would be closed immediately
-    if (this.closeOnMouseDownOutside) {
-      this._documentMouseDownHandler = this._onDocumentMouseDown.bind(this);
-      this.$container.document(true).addEventListener('mousedown', this._documentMouseDownHandler, true); // true=the event handler is executed in the capturing phase
-    }
-
+    this._renderCloseOnMouseDownOutside();
     // Install popup open close handler
-    if (this.closeOnOtherPopupOpen) {
-      this._popupOpenHandler = this._onPopupOpen.bind(this);
-      this.session.desktop.on('popupOpen', this._popupOpenHandler);
-    }
+    this._renderCloseOnOtherPopupOpen();
   }
 
   _attachAnchorHandlers() {

package/src/popup/Popup.less

@@ -1,9 +1,9 @@
 /*
- * Copyright (c) 2014-2018 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
- * http://www.eclipse.org/legal/epl-v10.html
+ * https://www.eclipse.org/legal/epl-v10.html
  *
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
@@ -24,6 +24,10 @@
   &.before-animate-open {
     .invisible();
   }
+
+  &.modal.animate-modality-highlight {
+    #scout.animation-shake();
+  }
 }
 
 .popup-arrow {

package/src/session/Session.js

@@ -1069,12 +1069,13 @@ export default class Session {
    *          do nothing. Can be used to prevent double messages for the same error.
    */
   showFatalMessage(options, errorCode) {
-    if (errorCode) {
-      if (this._fatalMessagesOnScreen[errorCode]) {
-        return;
-      }
-      this._fatalMessagesOnScreen[errorCode] = true;
+    if (!errorCode) {
+      errorCode = App.get().errorHandler.getJsErrorCode();
+    }
+    if (this._fatalMessagesOnScreen[errorCode]) {
+      return;
     }
+    this._fatalMessagesOnScreen[errorCode] = true;
 
     options = options || {};
     let model = {
@@ -1107,6 +1108,10 @@ export default class Session {
     messageBox.render($entryPoint);
   }
 
+  isFatalMessageShown() {
+    return Object.keys(this._fatalMessagesOnScreen).length > 0;
+  }
+
   uploadFiles(target, files, uploadProperties, maxTotalSize, allowedTypes) {
     let formData = new FormData(),
       acceptedFiles = [];

package/src/style/sizes.less

@@ -351,6 +351,7 @@
 @tooltip-padding-x: 12px;
 @tooltip-padding-y: @context-menu-item-padding-y;
 @tree-node-icon-width: 16px;
+@tree-node-icon-padding-right: 9px;
 @tree-node-bitmap-icon-size: @tree-node-icon-width;
 @tree-node-bitmap-icon-margin-top: -2px;
 @tree-node-checkbox-size: 20px;
@@ -364,6 +365,7 @@
 @tree-node-padding-left: 28px;
 @tree-node-padding-right: 7px;
 @tree-node-padding-y: 7px;
+@tree-node-padding-level-diff-parent-has-icon: @tree-node-icon-width + @tree-node-icon-padding-right;
 @view-tab-key-box-bottom: 9px;
 @view-tab-icon-font-size: 20px;
 @view-tab-selected-width: 56px;

package/src/table/TableFooter.js

@@ -1,9 +1,9 @@
 /*
- * Copyright (c) 2010-2021 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
- * http://www.eclipse.org/legal/epl-v10.html
+ * https://www.eclipse.org/legal/epl-v10.html
  *
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
@@ -583,13 +583,13 @@ export default class TableFooter extends Widget {
       if (footer.animating) {
         // Layout may be called when container stays open but changes its size using an animation.
         // At that time the controlContainer has not yet the final size, therefore measuring is not possible, but not necessary anyway.
-        controlContainerHeight = control.height;
+        controlContainerHeight = scout.nvl(control && control.height, controlContainerHeight);
       } else {
         // Measure the real height
         controlContainerHeight = graphics.size(footer.$controlContainer).height;
         // Expand control height? (but only if not resizing)
         if (!footer.resizing && growControl) {
-          controlContainerHeight = Math.max(control.height, controlContainerHeight);
+          controlContainerHeight = Math.max(control && control.height, controlContainerHeight);
         }
       }
     }

package/src/table/TableFooter.less

@@ -24,7 +24,7 @@
   left: 0;
   height: 16px;
   cursor: row-resize;
-  z-index: 1;
+  z-index: 2;
   border-top: @table-control-resize-border-width solid @table-control-resize-border-color;
 }
 
@@ -44,7 +44,7 @@
   }
 
   display: none;
-  z-index: 1;
+  z-index: 2; // Must not be smaller than z-index of scrollbar, see Table.less
   /* Reset nowrap, forms may have fields which need wrapping (e.g. label field) */
   white-space: normal;
 

package/src/table/controls/TableControl.js

@@ -1,9 +1,9 @@
 /*
- * Copyright (c) 2014-2018 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
- * http://www.eclipse.org/legal/epl-v10.html
+ * https://www.eclipse.org/legal/epl-v10.html
  *
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
@@ -99,13 +99,18 @@ export default class TableControl extends Action {
   /**
    * Renders the content if not already rendered.<br>
    * Opens the container if the container is not already open.<br>
-   * Does nothing if the content is not available yet to -> don't open container if content is not rendered yet to prevent blank container or laggy opening.
+   * Does nothing if the content is not available yet to -> don't open container if content is not rendered yet to prevent blank container or laggy opening.<br>
+   * Does nothing if the control is not selected.
    */
   renderContent() {
     if (!this.contentRendered && !this.isContentAvailable()) {
       return;
     }
 
+    if (!this.selected) {
+      return;
+    }
+
     if (!this.tableFooter.open) {
       this.tableFooter.openControlContainer(this);
     }