@eclipse-scout/core 22.0.1 → 22.0.11

package/src/table/editor/CellEditorPopup.js

@@ -1,5 +1,5 @@
 /*
- * 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
@@ -63,6 +63,13 @@ export default class CellEditorPopup extends Popup {
     this.pack();
   }
 
+  /**
+   * @override
+   */
+  _getDefaultOpen$Parent() {
+    return this.table.$data;
+  }
+
   _render() {
     super._render();
 
@@ -87,12 +94,10 @@ export default class CellEditorPopup extends Popup {
       cssClass: cssClass
     });
 
-    this._alignWithSelection();
-
     // Make sure cell content is not visible while the editor is open (especially necessary for transparent editors like checkboxes)
     this.$anchor.css('visibility', 'hidden');
 
-    this._rowOrderChangedFunc = function(event) {
+    this._rowOrderChangedFunc = event => {
       if (event.animating) {
         // row is only set while animating
         if (event.row === this.row) {
@@ -101,7 +106,7 @@ export default class CellEditorPopup extends Popup {
       } else {
         this.position();
       }
-    }.bind(this);
+    };
     this.table.on('rowOrderChanged', this._rowOrderChangedFunc);
     // Set table style to focused, so that it looks as it still has the focus.
     // This prevents flickering if the cell editor gets opened, especially when tabbing to the next cell editor.
@@ -161,14 +166,15 @@ export default class CellEditorPopup extends Popup {
   }
 
   position() {
-    let cellBounds, rowBounds,
-      $tableData = this.table.$data,
+    let $tableData = this.table.$data,
       $row = this.row.$row,
       $cell = this.$anchor,
       insetsLeft = $tableData.cssPaddingLeft() + $row.cssMarginLeft() + $row.cssBorderLeftWidth();
 
-    cellBounds = graphics.bounds($cell);
-    rowBounds = graphics.bounds($row);
+    this._alignWithSelection();
+
+    let cellBounds = graphics.bounds($cell);
+    let rowBounds = graphics.bounds($row);
     this.setLocation(new Point(insetsLeft + cellBounds.x, $tableData.scrollTop() + rowBounds.y));
   }
 
@@ -196,7 +202,8 @@ export default class CellEditorPopup extends Popup {
     }
 
     this._pendingCompleteCellEdit.then(() => {
-      this._pendingCompleteCellEdit = null;
+      // Ensure complete will never be called more than once
+      this._pendingCompleteCellEdit = $.resolvedPromise();
     });
 
     return this._pendingCompleteCellEdit;
@@ -236,11 +243,7 @@ export default class CellEditorPopup extends Popup {
   }
 
   _onKeyStroke(event) {
-    if (!this.session.keyStrokeManager.invokeAcceptInputOnActiveValueField(event.keyStroke, event.keyStrokeContext)) {
-      return;
-    }
-    if (this.$container.isOrHas(event.keyStrokeContext.$getScopeTarget())) {
-      // Don't interfere with key strokes of the popup or children of the popup (otherwise pressing enter would close both the popup and the form at once)
+    if (!this._invokeCompleteEditBeforeKeyStroke(event)) {
       return;
     }
     // Make sure completeEdit is called immediately after calling acceptInput.
@@ -249,6 +252,17 @@ export default class CellEditorPopup extends Popup {
     this.completeEdit(false);
   }
 
+  _invokeCompleteEditBeforeKeyStroke(event) {
+    if (!this.session.keyStrokeManager.invokeAcceptInputOnActiveValueField(event.keyStroke, event.keyStrokeContext)) {
+      return false;
+    }
+    if (this.$container.isOrHas(event.keyStrokeContext.$getScopeTarget())) {
+      // Don't interfere with key strokes of the popup or children of the popup (otherwise pressing enter would close both the popup and the form at once)
+      return false;
+    }
+    return true;
+  }
+
   waitForCompleteCellEdit() {
     if (this._pendingCompleteCellEdit) {
       return this._pendingCompleteCellEdit.promise();

package/src/table/keystrokes/AbstractTableNavigationKeyStroke.js

@@ -19,6 +19,7 @@ export default class AbstractTableNavigationKeyStroke extends KeyStroke {
     this.shift = !table.multiSelect ? false : undefined;
     this.stopPropagation = true;
     this.keyStrokeMode = KeyStroke.Mode.DOWN;
+    this.inheritAccessibility = false;
   }
 
   _accept(event) {

package/src/table/keystrokes/TableCopyKeyStroke.js

@@ -18,6 +18,7 @@ export default class TableCopyKeyStroke extends KeyStroke {
     this.which = [keys.C];
     this.ctrl = true;
     this.renderingHints.render = false;
+    this.inheritAccessibility = false;
   }
 
   handle(event) {

package/src/table/keystrokes/TableNavigationCollapseKeyStroke.js

@@ -17,12 +17,12 @@ export default class TableNavigationCollapseKeyStroke extends AbstractTableNavig
     this.field = table;
     this.which = [keys.SUBTRACT, keys.LEFT];
     this.renderingHints.text = '-';
-    this.renderingHints.$drawingArea = function($drawingArea, event) {
+    this.renderingHints.$drawingArea = ($drawingArea, event) => {
       let row = this.field.selectedRows[0];
       if (row) {
         return row.$row;
       }
-    }.bind(this);
+    };
   }
 
   _accept(event) {

package/src/table/keystrokes/TableNavigationEndKeyStroke.js

@@ -16,12 +16,12 @@ export default class TableNavigationEndKeyStroke extends AbstractTableNavigation
     super(table);
     this.which = [keys.END];
     this.renderingHints.text = 'End';
-    this.renderingHints.$drawingArea = function($drawingArea, event) {
+    this.renderingHints.$drawingArea = ($drawingArea, event) => {
       let viewport = this._viewportInfo();
       if (viewport.lastRow) {
         return viewport.lastRow.$row;
       }
-    }.bind(this);
+    };
   }
 
   handle(event) {

package/src/table/keystrokes/TableNavigationExpandKeyStroke.js

@@ -17,12 +17,12 @@ export default class TableNavigationExpandKeyStroke extends AbstractTableNavigat
     this.field = table;
     this.which = [keys.ADD, keys.RIGHT];
     this.renderingHints.text = '+';
-    this.renderingHints.$drawingArea = function($drawingArea, event) {
+    this.renderingHints.$drawingArea = ($drawingArea, event) => {
       let row = this.field.selectedRows[0];
       if (row) {
         return row.$row;
       }
-    }.bind(this);
+    };
   }
 
   _accept(event) {

package/src/table/keystrokes/TableNavigationHomeKeyStroke.js

@@ -16,12 +16,12 @@ export default class TableNavigationHomeKeyStroke extends AbstractTableNavigatio
     super(table);
     this.which = [keys.HOME];
     this.renderingHints.text = 'Home';
-    this.renderingHints.$drawingArea = function($drawingArea, event) {
+    this.renderingHints.$drawingArea = ($drawingArea, event) => {
       let viewport = this._viewportInfo();
       if (viewport.firstRow) {
         return viewport.firstRow.$row;
       }
-    }.bind(this);
+    };
   }
 
   handle(event) {

package/src/table/keystrokes/TableNavigationPageDownKeyStroke.js

@@ -16,12 +16,12 @@ export default class TableNavigationPageDownKeyStroke extends AbstractTableNavig
     super(table);
     this.which = [keys.PAGE_DOWN];
     this.renderingHints.text = 'PgDn';
-    this.renderingHints.$drawingArea = function($drawingArea, event) {
+    this.renderingHints.$drawingArea = ($drawingArea, event) => {
       let viewport = this._viewportInfo();
       if (viewport.lastRow) {
         return viewport.lastRow.$row;
       }
-    }.bind(this);
+    };
   }
 
   handle(event) {

package/src/table/keystrokes/TableNavigationPageUpKeyStroke.js

@@ -16,12 +16,12 @@ export default class TableNavigationPageUpKeyStroke extends AbstractTableNavigat
     super(table);
     this.which = [keys.PAGE_UP];
     this.renderingHints.text = 'PgUp';
-    this.renderingHints.$drawingArea = function($drawingArea, event) {
+    this.renderingHints.$drawingArea = ($drawingArea, event) => {
       let viewport = this._viewportInfo();
       if (viewport.firstRow) {
         return viewport.firstRow.$row;
       }
-    }.bind(this);
+    };
   }
 
   handle(event) {

package/src/table/keystrokes/TableNavigationUpKeyStroke.js

@@ -16,12 +16,12 @@ export default class TableNavigationUpKeyStroke extends AbstractTableNavigationK
     super(table);
     this.which = [keys.UP];
     this.renderingHints.text = '↑';
-    this.renderingHints.$drawingArea = function($drawingArea, event) {
+    this.renderingHints.$drawingArea = ($drawingArea, event) => {
       let row = this.firstRowBeforeSelection();
       if (row) {
         return row.$row;
       }
-    }.bind(this);
+    };
   }
 
   handle(event) {

package/src/table/keystrokes/TableRefreshKeyStroke.js

@@ -17,9 +17,9 @@ export default class TableRefreshKeyStroke extends KeyStroke {
     this.field = table;
     this.which = [keys.F5];
     this.renderingHints.offset = 14;
-    this.renderingHints.$drawingArea = function($drawingArea, event) {
+    this.renderingHints.$drawingArea = ($drawingArea, event) => {
       return this.field.footer ? this.field.footer._$infoLoad.find('.table-info-button') : null;
-    }.bind(this);
+    };
   }
 
   _accept(event) {

package/src/table/keystrokes/TableSelectAllKeyStroke.js

@@ -18,9 +18,10 @@ export default class TableSelectAllKeyStroke extends KeyStroke {
     this.ctrl = true;
     this.which = [keys.A];
     this.renderingHints.offset = 14;
-    this.renderingHints.$drawingArea = function($drawingArea, event) {
+    this.renderingHints.$drawingArea = ($drawingArea, event) => {
       return this.field.footer ? this.field.footer._$infoSelection.find('.table-info-button') : null;
-    }.bind(this);
+    };
+    this.inheritAccessibility = false;
   }
 
   handle(event) {

package/src/table/keystrokes/TableStartCellEditKeyStroke.js

@@ -18,7 +18,7 @@ export default class TableStartCellEditKeyStroke extends KeyStroke {
     this.ctrl = true;
     this.which = [keys.ENTER];
     this.stopPropagation = true;
-    this.renderingHints.$drawingArea = function($drawingArea, event) {
+    this.renderingHints.$drawingArea = ($drawingArea, event) => {
       let editPosition = event._editPosition,
         columnIndex = this.field.visibleColumns().indexOf(editPosition.column);
       if (columnIndex === 0) {
@@ -26,7 +26,7 @@ export default class TableStartCellEditKeyStroke extends KeyStroke {
         return editPosition.row.$row;
       }
       return this.field.$cell(columnIndex, editPosition.row.$row);
-    }.bind(this);
+    };
   }
 
   _accept(event) {

package/src/testing/index.js

@@ -20,6 +20,7 @@ export {default as TestBeanField} from './form/fields/beanfield/TestBeanField';
 export {default as TabBoxSpecHelper} from './form/fields/tabbox/TabBoxSpecHelper';
 export {default as OutlineSpecHelper} from './desktop/outline/OutlineSpecHelper';
 export {default as DummyLookupCall} from './lookup/DummyLookupCall';
+export {default as AbortableMicrotaskStaticLookupCall} from './lookup/AbortableMicrotaskStaticLookupCall';
 export {default as ActiveDummyLookupCall} from './lookup/ActiveDummyLookupCall';
 export {default as ColumnDescriptorDummyLookupCall} from './lookup/ColumnDescriptorDummyLookupCall';
 export {default as LanguageDummyLookupCall} from './lookup/LanguageDummyLookupCall';

package/src/testing/lookup/AbortableMicrotaskStaticLookupCall.js

@@ -0,0 +1,50 @@
+/*
+ * Copyright (c) 2010-2020 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
+ */
+import {StaticLookupCall} from '../../index';
+import $ from 'jquery';
+
+export default class AbortableMicrotaskStaticLookupCall extends StaticLookupCall {
+  constructor() {
+    super();
+    this._deferred = null;
+  }
+
+  abort() {
+    this._deferred.reject({
+      canceled: true
+    });
+    super.abort();
+  }
+
+  _getByKey(key) {
+    this._deferred = $.Deferred();
+    queueMicrotask(this._queryByKey.bind(this, this._deferred, key));
+    return this._deferred.promise();
+  }
+
+  _getAll() {
+    this._deferred = $.Deferred();
+    queueMicrotask(this._queryByAll.bind(this, this._deferred));
+    return this._deferred.promise();
+  }
+
+  _getByText(text) {
+    this._deferred = $.Deferred();
+    queueMicrotask(this._queryByText.bind(this, this._deferred, text));
+    return this._deferred.promise();
+  }
+
+  _getByRec(rec) {
+    this._deferred = $.Deferred();
+    queueMicrotask(this._queryByRec.bind(this, this._deferred, rec));
+    return this._deferred.promise();
+  }
+}

package/src/tile/TileGrid.js

@@ -198,7 +198,11 @@ export default class TileGrid extends Widget {
   }
 
   _updateTabbable() {
-    this.$container.setTabbable(this.enabled && (this.textFilterEnabled || this.selectable));
+    if (!this.textFilterEnabled && !this.selectable) {
+      this.$container.setTabbable(false);
+    } else {
+      this.$container.setTabbableOrFocusable(this.enabledComputed);
+    }
   }
 
   insertTile(tile) {
@@ -396,7 +400,7 @@ export default class TileGrid extends Widget {
   }
 
   _onAnimatedTileRemove(tile) {
-    if (!tile.rendered || !tile.animateRemoval) {
+    if (!tile.removalPending) {
       return;
     }
     this.tileRemovalPendingCount++;
@@ -760,16 +764,10 @@ export default class TileGrid extends Widget {
     if ($scrollables.length === 0) {
       return;
     }
-    let oldScrollTopArr = $scrollables.map((i, $elem) => {
-      return $elem.scrollTop();
-    }).toArray();
     // Make sure the tile grid has the focus when focusing a tile
-    if (this.focus()) {
-      // Restore old scroll to prevent scrolling by the browser due to the focus() call
-      oldScrollTopArr.forEach((val, idx) => {
-        $scrollables[idx].scrollTop(val);
-      }, this);
-    }
+    this.focus({
+      preventScroll: true
+    });
   }
 
   setSelectable(selectable) {
@@ -1382,7 +1380,7 @@ export default class TileGrid extends Widget {
   }
 
   _removeTileByFilter(tile) {
-    // In virtual mode, filtered tiles are not rendered. In normal mode, the filter animation is triggerd by _renderVisible of the tile.
+    // In virtual mode, filtered tiles are not rendered. In normal mode, the filter animation is triggered by _renderVisible of the tile.
     // Since the tile is removed immediately, the invisible animation would not start, so we use the remove animation instead.
     // But because the delete animation is a different one to the filter animation, the removeClass needs to be swapped
     // Remove class first to make sure animation won't be finished before the animationend listener is attached in Widget._removeAnimated (which may happen because a setTimeout is used there)

package/src/tile/TileGridLayout.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
@@ -151,7 +151,7 @@ export default class TileGridLayout extends LogicalGridLayout {
    */
   _layoutCellBounds(containerSize, containerInsets) {
     // Since the tiles are positioned absolutely it is necessary to add the height of the filler to the top insets
-    if (this.widget.virtual) {
+    if (this.widget.virtual && this.widget.$fillBefore) {
       containerInsets.top += this.widget.$fillBefore.outerHeight(true);
     }
     return super._layoutCellBounds(containerSize, containerInsets);

package/src/tile/accordion/TileAccordion.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
@@ -352,6 +352,21 @@ export default class TileAccordion extends Accordion {
   _filter() {
     this.groups.forEach(group => {
       group.body.filter();
+
+      // If the layout has not been invalidated as part of the filtering above, it even though must be validated here.
+      // This is because groups above might have fewer visible Tiles now which makes room for this group.
+      // The revalidateLayout() with scrolling=true here ensures TileGrid._renderViewPort() is called to ensure these Tiles become visible as there is space available now.
+      // It is executed as postValidateFunction because the groups above must have completed their layouting so that
+      // TileGrid._renderViewPort() knows that there is more space available now.
+      if (group.body.htmlComp && group.body.htmlComp.valid && !group.body._accordionLayoutHandler /* skip if already registered */) {
+        group.body._accordionLayoutHandler = () => {
+          group.body.scrolling = true;
+          group.body.revalidateLayout();
+          group.body.scrolling = false;
+          group.body._accordionLayoutHandler = null;
+        };
+        this.session.layoutValidator.schedulePostValidateFunction(group.body._accordionLayoutHandler);
+      }
     });
   }
 

package/src/tile/fields/FormFieldTile.less

@@ -222,8 +222,16 @@
         }
       }
 
-      &.has-error > .status::before {
-        color: @palette-red-3;
+      &.has-error > .status {
+        &::before {
+          color: @tile-default-inverted-error-status-color;
+        }
+
+        &:hover::before,
+        &:active::before,
+        &.selected::before {
+          color: @tile-default-inverted-error-status-hover-color;
+        }
       }
 
       .scrollbar-thumb-handle {
@@ -315,11 +323,11 @@
   }
 
   &.selected {
-    #scout.double-drop-shadow(@spread1: 2px, @color1: @dashboard-tile-selected-border-color, @y2: 0px, @blur2: 0px);
+    #scout.double-drop-shadow(@spread1: 2px, @color1: @dashboard-tile-default-selected-border-color, @y2: 0px, @blur2: 0px);
 
     &.inverted {
-      --tile-background-color: mix(@tile-default-inverted-background-color, @tile-default-inverted-selection-background-color, 65%);
-      #scout.double-drop-shadow(@spread1: 2px, @color1: @dashboard-tile-default-selected-border-color, @y2: 0px, @blur2: 0px);
+      --tile-background-color: @dashboard-tile-default-inverted-background-color;
+      #scout.double-drop-shadow(@spread1: 2px, @color1: @dashboard-tile-default-inverted-selected-border-color, @y2: 0px, @blur2: 0px);
     }
 
     &.color-alternative {
@@ -327,16 +335,15 @@
     }
 
     &.inverted.color-alternative {
-      --tile-background-color: mix(@tile-alternative-inverted-background-color, @tile-alternative-inverted-selection-background-color, 65%);
-      #scout.double-drop-shadow(@spread1: 2px, @color1: @dashboard-tile-alternative-selected-border-color, @y2: 0px, @blur2: 0px);
+      --tile-background-color: @dashboard-tile-alternative-inverted-background-color;
+      #scout.double-drop-shadow(@spread1: 2px, @color1: @dashboard-tile-alternative-inverted-selected-border-color, @y2: 0px, @blur2: 0px);
     }
 
-
     .dimmed-background & {
-      #scout.double-drop-shadow(@spread1: 2px, @color1: @dashboard-tile-selected-border-color, @alpha2: @dashboard-tile-drop-shadow-light-alpha);
+      #scout.double-drop-shadow(@spread1: 2px, @color1: @dashboard-tile-default-selected-border-color, @alpha2: @dashboard-tile-drop-shadow-light-alpha);
 
       &.inverted {
-        #scout.double-drop-shadow(@spread1: 2px, @color1: @dashboard-tile-default-selected-border-color, @alpha2: @dashboard-tile-drop-shadow-dark-alpha);
+        #scout.double-drop-shadow(@spread1: 2px, @color1: @dashboard-tile-default-inverted-selected-border-color, @alpha2: @dashboard-tile-drop-shadow-dark-alpha);
       }
 
       &.color-alternative {
@@ -344,7 +351,7 @@
       }
 
       &.inverted.color-alternative {
-        #scout.double-drop-shadow(@spread1: 2px, @color1: @dashboard-tile-alternative-selected-border-color, @alpha2: @dashboard-tile-drop-shadow-dark-alpha);
+        #scout.double-drop-shadow(@spread1: 2px, @color1: @dashboard-tile-alternative-inverted-selected-border-color, @alpha2: @dashboard-tile-drop-shadow-dark-alpha);
       }
     }
   }

package/src/tile/fields/tablefield/TileTableField.less

@@ -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
@@ -53,6 +53,23 @@
       & > .table-header-item {
         color: @tile-table-default-color;
 
+        &.sorted,
+        &.grouped,
+        &.filtered {
+          padding-right: @table-header-item-padding-right;
+
+          &.halign-right,
+          &.halign-center {
+            padding-right: @table-header-item-padding-left;
+          }
+
+          &.last.halign-left,
+          &.last.halign-center,
+          &.last.halign-right {
+            padding-right: @table-header-item-padding-right-last;
+          }
+        }
+
         & > .table-header-item-state {
           display: none;
         }

package/src/tile/keystrokes/TileGridSelectKeyStroke.js

@@ -16,12 +16,13 @@ export default class TileGridSelectKeyStroke extends KeyStroke {
     super();
     this.field = tileGrid;
     this.shift = !tileGrid.multiSelect ? false : undefined;
-    this.renderingHints.$drawingArea = function($drawingArea, event) {
+    this.renderingHints.$drawingArea = ($drawingArea, event) => {
       let result = this._computeNewSelection();
       if (result && result.focusedTile) {
         return result.focusedTile.$container;
       }
-    }.bind(this);
+    };
+    this.inheritAccessibility = false;
   }
 
   /**

package/src/timepicker/TimePickerTouchPopup.js

@@ -51,4 +51,12 @@ export default class TimePickerTouchPopup extends TouchPopup {
     }
     this._touchField._triggerAcceptInput();
   }
+
+  /**
+   * @override
+   */
+  _acceptInput() {
+    this._field.acceptTime();
+    this.close();
+  }
 }

package/src/tree/CompactTree.less

@@ -19,7 +19,7 @@
 
     & > .tree-data > .nodes > .section > .section-node.selected {
       text-decoration: underline;
-      color: @active-color;
+      color: @focus-color;
     }
   }
 

package/src/tree/Tree.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
@@ -911,7 +911,7 @@ export default class Tree extends Widget {
     this._installOrUninstallDragAndDropHandler();
     let enabled = this.enabledComputed;
     this.$data.setEnabled(enabled);
-    this.$container.setTabbable(enabled);
+    this.$container.setTabbableOrFocusable(enabled);
   }
 
   /**
@@ -2452,7 +2452,7 @@ export default class Tree extends Widget {
     }
     nodes = arrays.ensure(nodes);
     nodes.forEach(function(node) {
-      if (!node.enabled && opts.checkOnlyEnabled || node.checked === opts.checked) {
+      if (!node.enabled && opts.checkOnlyEnabled || node.checked === opts.checked || !node.filterAccepted) {
         if (opts.checkChildren) {
           this.checkNodes(node.childNodes, opts);
         }
@@ -3170,7 +3170,7 @@ export default class Tree extends Widget {
   // same as on Table.prototype._onDesktopPopupOpen
   _onDesktopPopupOpen(event) {
     let popup = event.popup;
-    if (!this.enabledComputed) {
+    if (!this.isFocusable(false)) {
       return;
     }
     // Set tree style to focused if a context menu or a menu bar popup opens, so that it looks as it still has the focus