@eclipse-scout/core 22.0.2 → 22.0.12

package/src/logging/logging.js

@@ -12,9 +12,16 @@ import {NullLogger, scout, URL} from '../index';
 import $ from 'jquery';
 import strings from '../util/strings';
 
-/* global log4javascript */
+const Level = {
+  TRACE: 'trace',
+  DEBUG: 'debug',
+  INFO: 'info',
+  WARN: 'warn',
+  ERROR: 'error',
+  FATAL: 'fatal'
+};
 
-const DEFAULT_LEVEL = 'trace';
+const DEFAULT_LEVEL = Level.TRACE;
 let initialized = false;
 let _appendersToAdd = [];
 let showStackTraces = true;
@@ -85,17 +92,17 @@ export function parseLevel(level) {
   }
   level = level.toLowerCase();
   switch (level) {
-    case 'trace':
+    case Level.TRACE:
       return log4javascript.Level.TRACE;
-    case 'debug':
+    case Level.DEBUG:
       return log4javascript.Level.DEBUG;
-    case 'info':
+    case Level.INFO:
       return log4javascript.Level.INFO;
-    case 'warn':
+    case Level.WARN:
       return log4javascript.Level.WARN;
-    case 'error':
+    case Level.ERROR:
       return log4javascript.Level.ERROR;
-    case 'fatal':
+    case Level.FATAL:
       return log4javascript.Level.FATAL;
   }
 }
@@ -115,6 +122,7 @@ export function addAppender(factoryName, options) {
 
 export default {
   DEFAULT_LEVEL,
+  Level,
   addAppender,
   bootstrap,
   initLog4Javascript,

package/src/login/LoginBox.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
@@ -56,6 +56,7 @@ export default class LoginBox extends Box {
     if (this.messageKey) {
       this.$message = $('<div>')
         .attr('id', 'message-box')
+        .addClass('message-box')
         .html(strings.nl2br(this.texts.get(this.messageKey)))
         .appendTo(this.$form);
     }

package/src/login/LoginBox.less

@@ -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
@@ -19,6 +19,11 @@
 
   & > .button {
     margin-top: 16px;
+    margin-bottom: 0;
+  }
+
+  & > .message-box {
+    margin: 0 20px 12px 20px;
   }
 
   & > input.alternative:-webkit-autofill {
@@ -93,3 +98,15 @@
     #scout.animation(nop 0.05s);
   }
 }
+
+@media (max-width: @box-responsive-width) {
+  .login-box-content > form {
+    & > .message-box,
+    & > input,
+    & > .button {
+      width: 100%;
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
+}

package/src/menu/MenuExecKeyStroke.js

@@ -8,26 +8,12 @@
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
  */
-import {keys, KeyStroke} from '../index';
+import {ActionExecKeyStroke} from '../index';
 
-export default class MenuExecKeyStroke extends KeyStroke {
+export default class MenuExecKeyStroke extends ActionExecKeyStroke {
 
   constructor(menu) {
-    super();
-    this.field = menu;
-    this.which = [keys.SPACE, keys.ENTER];
-    this.stopPropagation = true;
-
+    super(menu);
     this.renderingHints.offset = 16;
-    this.renderingHints.$drawingArea = function($drawingArea, event) {
-      return this.field.$container;
-    }.bind(this);
-  }
-
-  /**
-   * @override KeyStroke.js
-   */
-  handle(event) {
-    this.field.doAction();
   }
 }

package/src/menu/MenuNavigationKeyStroke.js

@@ -15,6 +15,7 @@ export default class MenuNavigationKeyStroke extends KeyStroke {
   constructor(popup) {
     super();
     this.field = popup;
+    this.inheritAccessibility = false;
   }
 
   _accept(event) {

package/src/menu/menubar/MenuBarLeftKeyStroke.js

@@ -12,6 +12,7 @@ import {keys, KeyStroke} from '../../index';
 
 export default class MenuBarLeftKeyStroke extends KeyStroke {
 
+  // noinspection DuplicatedCode
   constructor(menuBar) {
     super();
     this.field = menuBar;
@@ -19,6 +20,7 @@ export default class MenuBarLeftKeyStroke extends KeyStroke {
     this.renderingHints.render = false;
     this.stopPropagation = true;
     this.keyStrokeMode = KeyStroke.Mode.DOWN;
+    this.inheritAccessibility = false;
   }
 
   handle(event) {

package/src/menu/menubar/MenuBarRightKeyStroke.js

@@ -12,6 +12,7 @@ import {keys, KeyStroke} from '../../index';
 
 export default class MenuBarRightKeyStroke extends KeyStroke {
 
+  // noinspection DuplicatedCode
   constructor(menuBar) {
     super();
     this.field = menuBar;
@@ -19,6 +20,7 @@ export default class MenuBarRightKeyStroke extends KeyStroke {
     this.renderingHints.render = false;
     this.stopPropagation = true;
     this.keyStrokeMode = KeyStroke.Mode.DOWN;
+    this.inheritAccessibility = false;
   }
 
   handle(event) {

package/src/messagebox/MessageBox.less

@@ -1,5 +1,5 @@
 /*
- * 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
@@ -22,6 +22,22 @@
     border-radius: 0;
   }
 
+  &.full-width {
+    & > .messagebox-buttons {
+      padding-left: 10px;
+      padding-right: 10px;
+
+      & > .box-button {
+        min-width: 70px; /* less min width for buttons on small screens */
+        margin-right: 8px;
+
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+    }
+  }
+
   .severity-button(@color, @hover-color: darken(@color, 6%), @active-color: darken(@color, 13%), @focus-color: @focus-box-shadow-color) {
     & > .box-buttons > .box-button {
       border-color: @color;
@@ -225,23 +241,7 @@
 
 @media (max-width: @messagebox-max-width) {
   .messagebox {
-    /* reduce message box width on small screens */
-    max-width: 330px;
     /* no need to have a margin on small screens */
     margin: 0;
-
-    & > .messagebox-buttons {
-      padding-left: 10px;
-      padding-right: 10px;
-
-      & > .box-button {
-        min-width: 70px; /* less min width for buttons on small screens */
-        margin-right: 8px;
-
-        &:last-child {
-          margin-right: 0;
-        }
-      }
-    }
   }
 }

package/src/planner/Planner.js

@@ -1533,6 +1533,8 @@ export default class Planner extends Widget {
       this._renderViewRange();
       this._rerenderActivities();
       this._renderSelectedActivity();
+      this.validateLayoutTree(); // Layouting is required for adjusting the scroll position
+      this._reconcileScrollPos();
     }
   }
 

package/src/session/Session.js

@@ -8,7 +8,7 @@
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
  */
-import {AjaxCall, App, arrays, BackgroundJobPollingStatus, BackgroundJobPollingSupport, Device, EventSupport, FileInput, files as fileUtil, FocusManager, fonts, icons, LayoutValidator, Locale, MessageBox, ModelAdapter, NullWidget, ObjectFactory, objects, Reconnector, RemoteEvent, ResponseQueue, scout, Status, strings, TextMap, texts, TypeDescriptor, URL, UserAgent, webstorage} from '../index';
+import {AjaxCall, App, arrays, BackgroundJobPollingStatus, BackgroundJobPollingSupport, Device, EventSupport, FileInput, files as fileUtil, FocusManager, fonts, icons, LayoutValidator, Locale, logging, MessageBox, ModelAdapter, NullWidget, ObjectFactory, objects, Reconnector, RemoteEvent, ResponseQueue, scout, Status, strings, TextMap, texts, TypeDescriptor, URL, UserAgent, webstorage} from '../index';
 import $ from 'jquery';
 
 export default class Session {
@@ -1364,13 +1364,16 @@ export default class Session {
   }
 
   /**
-   * Sends a request containing the error message for logging purpose.
-   * The request is sent immediately (does not await pending requests)
+   * Sends a request containing the log message for logging purpose.
+   * The request is sent immediately (does not await pending requests).
+   * @param {string} message the log message
+   * @param {logging.Level} [level] the log level used to log the message. Default is {@link logging.Level.ERROR}.
    */
-  sendLogRequest(message) {
+  sendLogRequest(message, level) {
     let request = this._newRequest({
       log: true,
-      message: message
+      message: message,
+      level: scout.nvl(level, logging.Level.ERROR)
     });
     if (this.currentEvent) {
       request.event = {

package/src/style/fonts.less

@@ -33,6 +33,7 @@ Try these to switch between fonts:
 @font-size-large: 16px;
 @font-size-extra-large: 32px;
 
+@font-size-icon-small: 14px;
 @font-size-icon: 16px;
 @font-size-icon-large: 24px;
 
@@ -43,8 +44,11 @@ Try these to switch between fonts:
 // or are often placed to the side of widgets with icons
 @text-margin-top: 1px;
 
-@icon-font-weight-light: 300;
+// Icons aligned with line-height may use this variable.
+// It should have the same size as regular text (not the font-size, the actual size)
+@font-icon-line-height: 15px;
 
+@icon-font-weight-light: 300;
 @tooltip-font-weight: @font-weight-normal;
 
 @font-face {

package/src/style/sizes.less

@@ -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
@@ -17,6 +17,8 @@
 @border-radius-medium: 8px;
 @border-radius-large: 12px;
 @borderless-field-padding-y: @text-field-padding-y + 1px;
+@breadcrumb-bar-field-padding-bottom: 0;
+@breadcrumb-bar-field-padding-bottom-dense: 4px;
 @collapse-handle-border-radius: @border-radius-medium;
 @control-border-radius: @border-radius;
 @control-alternative-border-radius: @control-border-radius;
@@ -173,7 +175,7 @@
 @desktop-tab-border-radius: @view-tab-selected-border-radius;
 @desktop-tab-margin-top: @view-tab-selected-margin-top;
 @desktop-tool-box-item-border-radius: @view-tab-border-radius;
-@desktop-tool-box-item-font-size: 14px;
+@desktop-tool-box-item-font-size: @font-size-icon-small;
 @desktop-tool-box-item-margin: 3px;
 @desktop-tool-box-item-margin-top: @view-tab-margin-top;
 @detail-table-border-radius: 4px;
@@ -236,7 +238,7 @@
 @outline-node-control-padding-left: @outline-title-padding-left;
 @outline-node-control-padding-y: @outline-node-padding-y;
 @outline-node-control-line-height: @tree-node-control-line-height;
-@outline-node-font-icon-line-height: 14px;
+@outline-node-font-icon-line-height: @tree-node-font-icon-line-height;
 @outline-node-font-icon-size: 16px;
 @outline-node-padding-left: 37px;
 @outline-node-padding-right: 8px;
@@ -291,9 +293,15 @@
 @tab-item-title-padding-bottom: @group-box-title-padding-bottom;
 @tab-item-title-padding-top: @group-box-title-padding-top;
 @tab-item-title-margin-top: @group-box-header-margin-top;
+@table-aggregate-cell-font-icon-line-height: 14px;
+@table-aggregate-sum-avg-font-icon-size: 13px;
+@table-aggregate-min-max-font-icon-size: 15px;
+@table-aggregate-row-font-size: @font-size-smaller;
 @table-cell-padding-left: 10px;
 @table-cell-padding-right: @table-cell-padding-left;
 @table-cell-padding-right-last: @scrollbar-size;
+@table-cell-font-icon-size: @tree-node-font-icon-size;
+@table-cell-font-icon-line-height: @tree-node-font-icon-line-height;
 @table-control-content-padding: 10px;
 @table-control-container-height: 364px;
 @table-control-container-height-dense: 320px;
@@ -349,9 +357,10 @@
 @tree-node-checkbox-margin-top: -2px;
 @tree-node-control-checkbox-size: 20px + @tree-node-control-size;
 @tree-node-control-size: 16px;
-@tree-node-control-line-height: 14px;
+@tree-node-control-line-height: @font-icon-line-height;
 @tree-node-control-padding-left: 13px;
-@tree-node-font-icon-line-height: 15px;
+@tree-node-font-icon-line-height: @font-icon-line-height;
+@tree-node-font-icon-size: @font-size-icon-small;
 @tree-node-padding-left: 28px;
 @tree-node-padding-right: 7px;
 @tree-node-padding-y: 7px;

package/src/table/Table.js

@@ -555,7 +555,7 @@ export default class Table extends Widget {
       return; // row was removed while loading the image
     }
     let oldRowHeight = row.height;
-    row.height = $row.outerHeight(true);
+    row.height = this._measureRowHeight($row);
     if (oldRowHeight !== row.height) {
       this.invalidateLayoutTree();
     }
@@ -1528,12 +1528,12 @@ export default class Table extends Widget {
 
   _updateRowHeight() {
     let $emptyRow = this.$data.appendDiv('table-row');
-    let $emptyAggrRow = this.$data.appendDiv('table-aggregate-row');
+    let $emptyAggrRow = this._build$AggregateRow().appendTo(this.$data);
 
     $emptyRow.appendDiv('table-cell').html(' ');
-    $emptyAggrRow.appendDiv('table-cell').html(' ');
-    this.rowHeight = $emptyRow.outerHeight(true);
-    this.aggregateRowHeight = $emptyAggrRow.outerHeight(true);
+    $emptyAggrRow.appendDiv('table-cell table-aggregate-cell').appendSpan('text').html(' ');
+    this.rowHeight = this._measureRowHeight($emptyRow);
+    this.aggregateRowHeight = this._measureRowHeight($emptyAggrRow);
     $emptyRow.remove();
     $emptyAggrRow.remove();
   }
@@ -1546,14 +1546,14 @@ export default class Table extends Widget {
       if (!row.$row) {
         row.height = null;
       } else {
-        row.height = row.$row.outerHeight(true);
+        row.height = this._measureRowHeight(row.$row);
       }
     });
     this._aggregateRows.forEach(aggregateRow => {
       if (!aggregateRow.$row) {
         aggregateRow.height = null;
       } else {
-        aggregateRow.height = aggregateRow.$row.outerHeight(true);
+        aggregateRow.height = this._measureRowHeight(aggregateRow.$row);
       }
     });
   }
@@ -1867,7 +1867,7 @@ export default class Table extends Widget {
     }
 
     this._destroyTooltipsForRow(row);
-    this._removeCellEditorForRow(row);
+    this._destroyCellEditorForRow(row);
 
     // Do not remove rows which are removed using an animation
     if (!$row.hasClass('hiding')) {
@@ -1937,7 +1937,7 @@ export default class Table extends Widget {
    * is expected to be linked with the corresponding '$row' (row.$row and $row.data('row')).
    */
   _installRow(row) {
-    row.height = row.$row.outerHeight(true);
+    row.height = this._measureRowHeight(row.$row);
 
     if (row.hasError) {
       this._showCellErrorForRow(row);
@@ -2397,14 +2397,14 @@ export default class Table extends Widget {
         return;
       }
 
-      let $aggregateRow = this._buildAggregateRowDiv(aggregateRow);
+      let $aggregateRow = this._build$AggregateRow(aggregateRow);
       $aggregateRow[insertFunc](refRow.$row).width(this.rowWidth);
 
       this.visibleColumns()
         .map(column => $(column.buildCellForAggregateRow(aggregateRow)).appendTo($aggregateRow))
         .forEach($c => this._resizeAggregateCell($c));
 
-      aggregateRow.height = $aggregateRow.outerHeight(true);
+      aggregateRow.height = this._measureRowHeight($aggregateRow);
       aggregateRow.$row = $aggregateRow;
       if (animate) {
         this._showRow(aggregateRow);
@@ -2412,7 +2412,7 @@ export default class Table extends Widget {
     }, this);
   }
 
-  _buildAggregateRowDiv(aggregateRow) {
+  _build$AggregateRow(aggregateRow) {
     let onTop = this.groupingStyle === Table.GroupingStyle.TOP;
     let $aggregateRow = this.$container
       .makeDiv('table-aggregate-row')
@@ -2983,7 +2983,7 @@ export default class Table extends Widget {
       oldRow.$row.replaceWith($updatedRow);
       Table.linkRowToDiv(row, $updatedRow);
       this._destroyTooltipsForRow(row);
-      this._removeCellEditorForRow(row);
+      this._destroyCellEditorForRow(row);
       this._installRow(row);
       if (oldRow.$row.hasClass('showing') && oldRow.$row.outerHeight() < row.$row.outerHeight() / 3) {
         // If the row was being shown by an animation, start the animation again for the new row, otherwise row would immediately appear without animation.
@@ -3053,9 +3053,9 @@ export default class Table extends Widget {
     }
   }
 
-  _removeCellEditorForRow(row) {
+  _destroyCellEditorForRow(row) {
     if (this.cellEditorPopup && this.cellEditorPopup.rendered && this.cellEditorPopup.row.id === row.id) {
-      this.cellEditorPopup.remove();
+      this.cellEditorPopup.destroy();
     }
   }
 
@@ -4853,7 +4853,7 @@ export default class Table extends Widget {
       this.$data.setEnabled(enabled);
     }
 
-    this.$container.setTabbable(enabled);
+    this.$container.setTabbableOrFocusable(enabled);
   }
 
   /**
@@ -4996,8 +4996,11 @@ export default class Table extends Widget {
   }
 
   _heightForRow(row) {
-    let height = 0,
+    let height = 0;
+    let aggregateRow = row.aggregateRowBefore;
+    if (this.groupingStyle === Table.GroupingStyle.BOTTOM) {
       aggregateRow = row.aggregateRowAfter;
+    }
 
     if (row.height) {
       height = row.height;
@@ -5017,6 +5020,10 @@ export default class Table extends Widget {
     return height;
   }
 
+  _measureRowHeight($row) {
+    return graphics.size($row, {includeMargin: true, exact: true}).height;
+  }
+
   /**
    * Returns a range of size this.viewRangeSize. Start of range is rowIndex - viewRangeSize / 4.
    * -> 1/4 of the rows are before the viewport 2/4 in the viewport 1/4 after the viewport,
@@ -5404,7 +5411,6 @@ export default class Table extends Widget {
     if (promise.state() === 'resolved') {
       // Do it immediately if promise has already been resolved.
       // This makes sure updateRow does not immediately reopen the editor after closing.
-      // At least for Scout JS, for Scout Classic it prevents flickering (endCellEdit comes after updateRows, but updateRows does not know whether the editor is closing so it will reopen it)
       destroyEditor();
     } else {
       promise.then(destroyEditor);
@@ -5443,7 +5449,7 @@ export default class Table extends Widget {
   // same as on Tree.prototype._onDesktopPopupOpen
   _onDesktopPopupOpen(event) {
     let popup = event.popup;
-    if (!this.enabledComputed) {
+    if (!this.isFocusable(false)) {
       return;
     }
     // Set table style to focused if a context menu or a menu bar popup opens, so that it looks as it still has the focus

package/src/table/Table.less

@@ -442,6 +442,9 @@
 .table-cell-icon {
   .font-icon& {
     color: @icon-color;
+    font-size: @table-cell-font-icon-size;
+    line-height: @table-cell-font-icon-line-height;
+    vertical-align: top;
 
     .disabled & {
       color: @disabled-color;
@@ -466,15 +469,12 @@
   overflow: hidden;
   padding-left: var(--table-row-margin-x);
   padding-right: var(--table-row-margin-x);
+  font-size: @table-aggregate-row-font-size;
 
   & > .table-cell {
     padding: var(--table-row-padding-y) @table-cell-padding-right 0 @table-cell-padding-left;
     border-bottom: 0;
     height: 100%;
-
-    & > .font-icon {
-      margin-top: 1px;
-    }
   }
 }
 
@@ -486,7 +486,7 @@
   margin-top: -1px; // top border should cover bottom border of the previous row
   padding-left: var(--table-row-margin-x);
   padding-right: var(--table-row-margin-x);
-  font-size: 12px;
+  font-size: @table-aggregate-row-font-size;
 
   & > .table-cell {
     border-bottom: 0;
@@ -518,10 +518,17 @@
     display: inline-block;
     color: @text-color;
     vertical-align: middle;
+    line-height: @table-aggregate-cell-font-icon-line-height;
+  }
+
+  &.sum > .table-cell-icon,
+  &.avg > .table-cell-icon {
+    font-size: @table-aggregate-sum-avg-font-icon-size;
   }
 
-  &.sum > .table-cell-icon, &.avg > .table-cell-icon {
-    font-size: @font-size-extra-small;
+  &.min > .table-cell-icon,
+  &.max > .table-cell-icon {
+    font-size: @table-aggregate-min-max-font-icon-size;
   }
 
   /* if aggregation is based on selected rows */

package/src/table/TableAdapter.js

@@ -187,26 +187,20 @@ export default class TableAdapter extends ModelAdapter {
 
   _onWidgetCompleteCellEdit(event) {
     event.preventDefault();
-    this._sendCompleteCellEdit(event.field);
+    this._sendCompleteCellEdit();
   }
 
-  _sendCompleteCellEdit(field) {
-    let data = {
-      fieldId: field.id
-    };
-    this._send('completeCellEdit', data);
+  _sendCompleteCellEdit() {
+    this._send('completeCellEdit');
   }
 
   _onWidgetCancelCellEdit(event) {
     event.preventDefault();
-    this._sendCancelCellEdit(event.field);
+    this._sendCancelCellEdit();
   }
 
-  _sendCancelCellEdit(field) {
-    let data = {
-      fieldId: field.id
-    };
-    this._send('cancelCellEdit', data);
+  _sendCancelCellEdit() {
+    this._send('cancelCellEdit');
   }
 
   _onWidgetRowsChecked(event) {
@@ -507,6 +501,9 @@ export default class TableAdapter extends ModelAdapter {
 
   _onEndCellEdit(fieldId) {
     let field = this.session.getModelAdapter(fieldId);
+    if (!field) {
+      throw new Error('Field adapter could not be resolved. Id: ' + fieldId);
+    }
     this.widget.endCellEdit(field.widget);
   }
 

package/src/table/TableHeaderMenuButton.js

@@ -8,7 +8,7 @@
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
  */
-import {Action, TableHeaderMenuButtonKeyStroke} from '../index';
+import {Action, ActionExecKeyStroke} from '../index';
 
 export default class TableHeaderMenuButton extends Action {
 
@@ -24,7 +24,7 @@ export default class TableHeaderMenuButton extends Action {
   _initKeyStrokeContext() {
     super._initKeyStrokeContext();
 
-    this.keyStrokeContext.registerKeyStroke([new TableHeaderMenuButtonKeyStroke(this)]);
+    this.keyStrokeContext.registerKeyStroke([new ActionExecKeyStroke(this)]);
   }
 
   _render() {

package/src/table/TableLayout.js

@@ -104,6 +104,12 @@ export default class TableLayout extends AbstractLayout {
       // Always render viewport (not only when viewRangeSize changes), because view range depends on scroll position and data height
       this.table._renderViewport();
 
+      // Render scroll top again to make sure the data is really at the correct position after rendering viewport.
+      // Somehow table.$data[0].scrollTop changes during _renderViewport sometimes (e.g. when there are aggregate rows)
+      if (!htmlContainer.layouted) {
+        this.table._renderScrollTop();
+      }
+
       // Make sure tooltips and editor popup are at correct position after layouting (e.g after window resizing)
       this.table.tooltips.forEach(tooltip => {
         if (tooltip.rendered) {

package/src/table/columns/Column.js

@@ -71,7 +71,7 @@ export default class Column {
 
   static DEFAULT_MIN_WIDTH = 60;
   static SMALL_MIN_WIDTH = 38;
-  static NARROW_MIN_WIDTH = 32;
+  static NARROW_MIN_WIDTH = 34;
 
   init(model) {
     this.session = model.session;
@@ -394,16 +394,19 @@ export default class Column {
     cell.field = field;
     // Override field alignment with the cell's alignment
     cell.field.gridData.horizontalAlignment = cell.horizontalAlignment;
+    popup = this._createEditorPopup(row, cell);
+    popup.$anchor = $cell;
+    popup.open(this.table.$data);
+    return popup;
+  }
 
-    popup = scout.create('CellEditorPopup', {
+  _createEditorPopup(row, cell) {
+    return scout.create('CellEditorPopup', {
       parent: this.table,
       column: this,
       row: row,
       cell: cell
     });
-    popup.$anchor = $cell;
-    popup.open(this.table.$data);
-    return popup;
   }
 
   /**