@eclipse-scout/core 22.0.1 → 22.0.11

package/src/table/Table.js

@@ -23,6 +23,7 @@ export default class Table extends Widget {
     this.contextColumn = null;
     this.checkable = false;
     this.checkableStyle = Table.CheckableStyle.CHECKBOX;
+    this.cellEditorPopup = null;
     this.compact = false;
     this.compactHandler = scout.create('TableCompactHandler', {table: this});
     this.compactColumn = null;
@@ -100,6 +101,7 @@ export default class Table extends Widget {
     this._popupOpenHandler = this._onDesktopPopupOpen.bind(this);
     this._rerenderViewPortAfterAttach = false;
     this._renderViewPortAfterAttach = false;
+    this._postAttachActions = [];
     this._desktopPropertyChangeHandler = this._onDesktopPropertyChange.bind(this);
     this._addWidgetProperties(['tableControls', 'menus', 'keyStrokes', 'staticMenus', 'tileTableHeader', 'tableTileGridMediator']);
 
@@ -475,7 +477,6 @@ export default class Table extends Widget {
   }
 
   _removeData() {
-    this._destroyCellEditorPopup();
     this._removeAggregateRows();
     this._uninstallImageListeners();
     this._uninstallCellTooltipSupport();
@@ -554,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();
     }
@@ -633,11 +634,11 @@ export default class Table extends Widget {
       // Don't start cell editor or trigger click if row control was clicked (expansion itself is handled by the mouse down handler)
       return;
     }
+    let row = $row.data('row'); // read row before the $row potentially could be replaced by the column specific logic on mouse up
     if (mouseButton === 1) {
       column.onMouseUp(event, $row);
       $appLink = this._find$AppLink(event);
     }
-    let row = $row.data('row');
     if ($appLink) {
       this._triggerAppLinkAction(column, row, $appLink.data('ref'), $appLink);
     } else {
@@ -1527,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();
   }
@@ -1545,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);
       }
     });
   }
@@ -1866,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')) {
@@ -1936,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);
@@ -2068,8 +2069,24 @@ export default class Table extends Widget {
   }
 
   /**
-   * This functions starts the cell editor for the given row and column. Prepare must wait until
-   * a pending completeCellEdit operation is resolved.
+   * Starts cell editing for the cell at the given column and row, but only if editing is allowed.
+   * @see prepareCellEdit
+   */
+  focusCell(column, row) {
+    let cell = this.cell(column, row);
+    if (this.enabledComputed && row.enabled && cell.editable) {
+      this.prepareCellEdit(column, row);
+    }
+  }
+
+  /**
+   * Creates a cell editor for the cell at the given column and row, ensures the row is selected and passes the editor
+   * to {@link #startCellEdit} which starts the editing by rendering the editor in a {@link CellEditorPopup}.<br>
+   * If the completion of a previous cell edit is still in progress, the preparation is delayed until the completion is finished.
+   *
+   * @param {boolean} [openFieldPopupOnCellEdit] true to instruct the editor to open its control popup when the editor is rendered.
+   *    This only has an effect if the editor has a popup (e.g. SmartField or DateField).
+   * @returns Promise the promise will be resolved when the preparation has been finished.
    */
   prepareCellEdit(column, row, openFieldPopupOnCellEdit) {
     let promise = $.resolvedPromise();
@@ -2080,10 +2097,10 @@ export default class Table extends Widget {
   }
 
   /**
-   * @param openFieldPopupOnCellEdit when this parameter is set to true, the CellEditorPopup sets an
+   * @param {boolean} [openFieldPopupOnCellEdit] when this parameter is set to true, the CellEditorPopup sets an
    *    additional property 'cellEditor' on the editor-field. The field instance may use this property
    *    to decide whether or not it should open a popup immediately after it is rendered. This is used
-   *    for Smart- and DateFields.
+   *    for Smart- and DateFields. Default is false.
    */
   prepareCellEditInternal(column, row, openFieldPopupOnCellEdit) {
     let event = new Event({
@@ -2380,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);
@@ -2395,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')
@@ -2966,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.
@@ -3036,17 +3053,25 @@ 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();
     }
   }
 
   startCellEdit(column, row, field) {
-    if (!this._isDataRendered() || !this.isAttachedAndRendered()) {
+    if (field.destroyed) {
+      // May happen if the action was postponed and the field destroyed in the meantime using endCellEdit.
+      return;
+    }
+    if (!this._isDataRendered()) {
       this._postRenderActions.push(this.startCellEdit.bind(this, column, row, field));
       return;
     }
+    if (!this.$container.isAttached()) {
+      this._postAttachActions.push(this.startCellEdit.bind(this, column, row, field));
+      return;
+    }
 
     this.trigger('startCellEdit', {
       column: column,
@@ -3066,11 +3091,6 @@ export default class Table extends Widget {
    *    value is updated by an updateRow event instead.
    */
   endCellEdit(field, saveEditorValue) {
-    if (!this._isDataRendered() || !this.isAttachedAndRendered()) {
-      this._postRenderActions.push(this.endCellEdit.bind(this, field, saveEditorValue));
-      return;
-    }
-
     if (!this.cellEditorPopup) {
       // the cellEditorPopup could already be removed by scrolling (out of view range) or be removed by update rows
       field.destroy();
@@ -4656,7 +4676,9 @@ export default class Table extends Widget {
     this.$container.toggleClass('checkable', scout.isOneOf(this.checkableStyle, Table.CheckableStyle.TABLE_ROW, Table.CheckableStyle.CHECKBOX_TABLE_ROW));
     this.$container.toggleClass('table-row-check', this.checkableStyle === Table.CheckableStyle.TABLE_ROW);
     if (this._isDataRendered()) {
+      this._updateRowWidth();
       this._redraw();
+      this.invalidateLayoutTree();
     }
   }
 
@@ -4831,7 +4853,7 @@ export default class Table extends Widget {
       this.$data.setEnabled(enabled);
     }
 
-    this.$container.setTabbable(enabled);
+    this.$container.setTabbableOrFocusable(enabled);
   }
 
   /**
@@ -4974,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;
@@ -4995,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,
@@ -5302,18 +5331,6 @@ export default class Table extends Widget {
     }
   }
 
-  focusCell(column, row) {
-    if (!this._isDataRendered() || !this.isAttachedAndRendered()) {
-      this._postRenderActions.push(this.focusCell.bind(this, column, row));
-      return;
-    }
-
-    let cell = this.cell(column, row);
-    if (this.enabledComputed && row.enabled && cell.editable) {
-      this.prepareCellEdit(column, row, false);
-    }
-  }
-
   _attach() {
     this.$parent.append(this.$container);
     super._attach();
@@ -5337,6 +5354,9 @@ export default class Table extends Widget {
     super._renderOnAttach();
     this._rerenderViewportAfterAttach();
     this._renderViewportAfterAttach();
+    let actions = this._postAttachActions;
+    this._postAttachActions = [];
+    actions.forEach(action => action());
   }
 
   _rerenderViewportAfterAttach() {
@@ -5365,11 +5385,6 @@ export default class Table extends Widget {
     super._detach();
   }
 
-  _onDetach() {
-    super._onDetach();
-    this._destroyCellEditorPopup();
-  }
-
   /**
    * @param {function} [callback] function to be called right after the popup is destroyed
    */
@@ -5396,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);
@@ -5435,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

@@ -49,25 +49,48 @@
   /* Used for scout.Table.CheckableStyle.TABLE_ROW */
 
   &.table-row-check {
+    & > .table-data {
+      & > .table-row {
+        &.selected {
+          /* Don't draw selection */
+          background-color: transparent;
 
-    & > .table-data > .table-row {
+          &::after {
+            display: none;
+          }
+        }
 
-      &.selected {
-        /* Don't draw selection */
+        &:hover {
+          background-color: @hover-background-color;
+        }
+      }
+
+      & > .table-row.disabled,
+      &.disabled > .table-row {
         background-color: transparent;
+      }
 
-        &::after {
-          display: none;
+      & > .table-row {
+        &.checked,
+        &.checked.selected {
+          /* Mark checked rows with a background color */
+          background-color: @table-row-checked-background-color;
+
+          & > .table-cell {
+            color: @table-row-checked-color;
+          }
+
+          &:hover {
+            background-color: @selected-hover-background-color;
+          }
         }
       }
 
-      &.checked,
-      &.checked.selected {
-        /* Mark checked rows with a background color */
-        background-color: @table-row-checked-background-color;
-
-        & > .table-cell {
-          color: @table-row-checked-color;
+      & > .table-row.disabled,
+      &.disabled > .table-row {
+        &.checked,
+        &.checked.selected {
+          background-color: @selected-disabled-background-color;
         }
       }
     }
@@ -419,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;
@@ -443,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;
-    }
   }
 }
 
@@ -463,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;
@@ -495,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: @font-size-extra-small;
+  &.sum > .table-cell-icon,
+  &.avg > .table-cell-icon {
+    font-size: @table-aggregate-sum-avg-font-icon-size;
+  }
+
+  &.min > .table-cell-icon,
+  &.max > .table-cell-icon {
+    font-size: @table-aggregate-min-max-font-icon-size;
   }
 
   /* if aggregation is based on selected rows */
@@ -622,4 +652,4 @@
 
 .organize-columns-behind-scrollbar-column.table-cell.last {
   padding: 0;
-}
+}

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/TableHeader.js

@@ -8,7 +8,7 @@
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
  */
-import {arrays, Column, ColumnUserFilter, Device, graphics, GroupBoxMenuItemsOrder, inspector, MenuBar, MenuDestinations, scout, scrollbars, strings, styles, Table, tooltips, Widget} from '../index';
+import {arrays, Column, ColumnUserFilter, Device, graphics, GroupBoxMenuItemsOrder, inspector, MenuBar, MenuDestinations, objects, scout, scrollbars, strings, styles, Table, tooltips, Widget} from '../index';
 import $ from 'jquery';
 
 export default class TableHeader extends Widget {
@@ -459,21 +459,23 @@ export default class TableHeader extends Widget {
     let filtered = this.table.getFilter(column.id);
     if (column.sortActive || column.grouped || filtered) {
       if (column.minWidth < Column.DEFAULT_MIN_WIDTH) {
-        column.prefMinWidth = column.minWidth;
+        column.__minWidthWithoutState = column.minWidth;
+        column.__widthWithoutState = column.width;
         column.minWidth = Column.DEFAULT_MIN_WIDTH;
       }
       if (column.width < column.minWidth) {
         this.table.resizeColumn(column, column.minWidth);
       }
     } else {
-      // Reset to preferred min width if no state is visible
-      if (column.prefMinWidth !== null) {
-        column.minWidth = column.prefMinWidth;
-        column.prefMinWidth = null;
-        // Resize to old min width, assuming user has not manually changed the size because column is still as width as default_min_width
+      // Reset to previous min width if no state is visible
+      if (!objects.isNullOrUndefined(column.__minWidthWithoutState)) {
+        column.minWidth = column.__minWidthWithoutState;
+        // Resize to previous min width, assuming user has not manually changed the size because column is still as width as default_min_width
         if (column.width === Column.DEFAULT_MIN_WIDTH) {
-          this.table.resizeColumn(column, column.minWidth);
+          this.table.resizeColumn(column, column.__widthWithoutState);
         }
+        column.__minWidthWithoutState = null;
+        column.__widthWithoutState = null;
       }
     }
   }

package/src/table/TableHeader.less

@@ -180,6 +180,7 @@
 
 .table-header-item-text {
   #scout.overflow-ellipsis-nowrap();
+  margin-top: @text-margin-top;
 }
 
 .table-header-item-state {

package/src/table/TableHeaderMenu.js

@@ -241,7 +241,9 @@ export default class TableHeaderMenu extends Popup {
     if (this.filterTable) {
       this.filterTable.off('rowsChecked', this._filterTableRowsCheckedHandler);
     }
-    this.tableHeader.$container.off('scroll', this._tableHeaderScrollHandler);
+    if (this.tableHeader.rendered) {
+      this.tableHeader.$container.off('scroll', this._tableHeaderScrollHandler);
+    }
     this.$headerItem.select(false);
     this.table.off('columnMoved', this._onColumnMovedHandler);
     this.table.off('filterAdded', this._tableFilterHandler);

package/src/table/TableHeaderMenu.less

@@ -33,6 +33,11 @@
   display: inline-block;
   vertical-align: top;
   padding: @table-header-menu-padding;
+
+  & > .table-header-menu-group > .table-header-menu-group-text {
+    // Increase size a little to ensure every text is fully visible, at least for german and english (currently necessary for additional sorting group)
+    width: calc(100% + 12px);
+  }
 }
 
 .table-header-menu-filters {
@@ -252,11 +257,11 @@
 
   & > .table-data {
     margin-top: 0;
-    padding: 3px 4px;
+    padding: 3px;
 
     & > .table-row {
       border-radius: @border-radius;
-      margin-bottom: 1px;
+      margin-bottom: 2px;
 
       &.last {
         margin-bottom: 0;

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/BooleanColumn.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2010-2020 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
@@ -21,7 +21,7 @@ export default class BooleanColumn extends Column {
     this.comparator = comparators.NUMERIC;
     this.filterType = 'ColumnUserFilter';
     this.horizontalAlignment = 0;
-    this.minWidth = Column.NARROW_MIN_WIDTH;
+    this.minWidth = Column.SMALL_MIN_WIDTH;
     this.triStateEnabled = false;
     this.textBased = false;
   }

package/src/table/columns/Column.js

@@ -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
@@ -43,7 +43,6 @@ export default class Column {
     this.type = 'text';
     this.width = 60;
     this.initialWidth = undefined; // the width the column initially has
-    this.prefMinWidth = null;
     this.minWidth = Column.DEFAULT_MIN_WIDTH; // the minimal width the column can have
     this.showSeparator = true;
     this.table = null;
@@ -71,7 +70,8 @@ export default class Column {
   }
 
   static DEFAULT_MIN_WIDTH = 60;
-  static NARROW_MIN_WIDTH = 32; // for columns without text (icon, check box)
+  static SMALL_MIN_WIDTH = 38;
+  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;
   }
 
   /**