@eclipse-scout/core 22.0.1 → 22.0.11

package/src/form/fields/groupbox/GroupBox.js

@@ -42,6 +42,7 @@ export default class GroupBox extends CompositeField {
     this.processButtons = [];
     this.processMenus = [];
     this.staticMenus = [];
+    this.selectionKeystroke = null;
     this.responsive = null;
 
     this.$header = null;
@@ -162,12 +163,12 @@ export default class GroupBox extends CompositeField {
       render: () => true,
       offset: 0,
       hAlign: HAlign.RIGHT,
-      $drawingArea: function($drawingArea, event) {
-        if (this.labelVisible) {
+      $drawingArea: ($drawingArea, event) => {
+        if (this.$header && this.$header.isVisible()) {
           return this.$header;
         }
         return this.$body;
-      }.bind(this)
+      }
     };
 
     keyStrokes
@@ -360,14 +361,11 @@ export default class GroupBox extends CompositeField {
     this.$container.toggleClass('has-scroll-shadow-bottom', hasScrollShadowBottom);
     if ((headerVisible || hasMenubarTop) && oldHasScrollShadowTop !== hasScrollShadowTop
       || hasMenubarBottom && oldHasScrollShadowBottom !== hasScrollShadowBottom) {
-      this.invalidateLayout();
+      this.invalidateLayoutTree(false);
     }
 
     // Enlarge header line if there is a shadow, but don't do it if there is a menubar on top
     fields.adjustStatusPositionForScrollShadow(this, () => hasScrollShadowTop && headerVisible && !hasMenubarTop);
-
-    // Prevent flickering of status icon
-    this.validateLayout();
   }
 
   setMainBox(mainBox) {
@@ -782,9 +780,16 @@ export default class GroupBox extends CompositeField {
   }
 
   _onControlClick(event) {
-    if (this.expandable) {
-      this.setExpanded(!this.expanded);
+    if (!this.expandable) {
+      return;
     }
+    const target = scout.widget(event.target);
+    if (this.menuBarPosition === GroupBox.MenuBarPosition.TITLE && this.menuBar.has(target)) {
+      // If the position of the menubar is set to title and a menu has been clicked, then the event must not be handled
+      return;
+    }
+
+    this.setExpanded(!this.expanded);
     $.suppressEvent(event); // otherwise, the event would be triggered twice sometimes (by group-box-control and group-box-title)
   }
 

package/src/form/fields/groupbox/GroupBox.less

@@ -120,6 +120,7 @@
     vertical-align: middle;
     padding: @group-box-title-padding-top 0 @group-box-title-padding-bottom 0;
     max-width: 100%;
+    margin-top: @text-margin-top;
 
     .group-box.has-sub-label > & {
       padding-bottom: @group-box-title-with-sub-label-padding-bottom;

package/src/form/fields/htmlfield/HtmlField.less

@@ -19,7 +19,6 @@
 
   & > .field {
     margin-left: @mandatory-indicator-width;
-    overflow: hidden;
 
     &:focus {
       outline: none;

package/src/form/fields/listbox/ListBox.js

@@ -1,14 +1,14 @@
 /*
- * Copyright (c) 2014-2017 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
  */
-import {arrays, ListBoxLayout, LookupBox, scout, Table, ValueField} from '../../../index';
+import {arrays, ListBoxLayout, LookupBox, scout, Table} from '../../../index';
 
 export default class ListBox extends LookupBox {
 
@@ -17,7 +17,6 @@ export default class ListBox extends LookupBox {
 
     this.table = null;
     this.lookupStatus = null;
-    this.clearable = ValueField.Clearable.NEVER;
 
     this._addWidgetProperties(['table', 'filterBox']);
   }
@@ -32,6 +31,12 @@ export default class ListBox extends LookupBox {
     if (!this.table) {
       this.table = this._createDefaultListBoxTable();
     }
+
+    // align checkableColumn in table with checkboxes of tree fields
+    if (this.table.checkableColumn) { // may be null if a non-default list-box-table with checkable=false is used
+      this.table.checkableColumn.minWidth = 28;
+      this.table.checkableColumn.width = this.table.checkableColumn.minWidth; // do not use setWidth here
+    }
   }
 
   _render() {
@@ -174,12 +179,13 @@ export default class ListBox extends LookupBox {
     if (lookupRow.enabled === false) {
       row.enabled = false;
     }
-    if (lookupRow.active === false) {
-      row.active = false;
-    }
     if (lookupRow.cssClass) {
       row.cssClass = lookupRow.cssClass;
     }
+    if (lookupRow.active === false) {
+      row.active = false;
+      row.cssClass = (row.cssClass ? (row.cssClass + ' ') : '') + 'inactive';
+    }
 
     return row;
   }

package/src/form/fields/lookupfield/lookupField.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
@@ -25,12 +25,13 @@ export function createTableRow(lookupRow, multipleColumns) {
   if (lookupRow.enabled === false) {
     row.enabled = false;
   }
-  if (lookupRow.active === false) {
-    row.active = false;
-  }
   if (lookupRow.cssClass) {
     row.cssClass = lookupRow.cssClass;
   }
+  if (lookupRow.active === false) {
+    row.active = false;
+    row.cssClass = (row.cssClass ? (row.cssClass + ' ') : '') + 'inactive';
+  }
 
   if (!multipleColumns) {
     cells.push(createTableCell(lookupRow, null, null));

package/src/form/fields/smartfield/ProposalField.js

@@ -189,11 +189,12 @@ export default class ProposalField extends SmartField {
     // this causes a lookup which may fail and open a new proposal chooser (property
     // change for 'result').
     if (searchTextChanged) {
+      this.clearErrorStatus();
       this._acceptByText(sync, searchText);
     } else if (!this._hasUiError()) {
       this._inputAccepted(false);
     } else {
-      // even though there's nothing todo, someone could wait for our promise to be resolved
+      // even though there's nothing to do, someone could wait for our promise to be resolved
       this._acceptInputDeferred.resolve();
     }
 

package/src/form/fields/smartfield/ProposalTreeNode.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
@@ -22,14 +22,10 @@ export default class ProposalTreeNode extends TreeNode {
   }
 
   _renderText() {
-    let text = this.text;
-    if (this.lookupRow.active === false) {
-      text += ' (' + this.session.text('InactiveState') + ')';
-    }
     if (this.htmlEnabled) {
-      this.$text.html(text);
+      this.$text.html(this.text);
     } else {
-      this.$text.textOrNbsp(text);
+      this.$text.textOrNbsp(this.text);
     }
   }
 

package/src/form/fields/smartfield/SmartField.js

@@ -1,31 +1,14 @@
 /*
- * 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
  */
-import {
-  arrays,
-  Device,
-  fields,
-  FormField,
-  InputFieldKeyStrokeContext,
-  keys,
-  LookupCall,
-  objects,
-  QueryBy,
-  scout,
-  SimpleLoadingSupport,
-  SmartFieldCancelKeyStroke,
-  SmartFieldLayout,
-  Status,
-  strings,
-  ValueField
-} from '../../../index';
+import {arrays, Device, fields, FormField, InputFieldKeyStrokeContext, keys, LookupCall, objects, QueryBy, scout, SimpleLoadingSupport, SmartFieldCancelKeyStroke, SmartFieldLayout, Status, strings, ValueField} from '../../../index';
 import $ from 'jquery';
 
 export default class SmartField extends ValueField {
@@ -932,6 +915,7 @@ export default class SmartField extends ValueField {
     });
 
     this.popup.open();
+    this.popup.$container.css('--inactive-lookup-row-suffix-text', `'${this.session.text('InactiveState')}'`);
 
     /* This variable is required to route events to the right field:
      * - in normal mode popup events should be processed by the normal smart-field

package/src/form/fields/smartfield/SmartField.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
@@ -266,13 +266,23 @@
     & > .table-data {
       padding: @proposal-chooser-padding-y @proposal-chooser-padding-x;
 
-      & > .table-row.first {
-        border-top: 1px solid @table-row-border-color;
+      & > .table-row {
+        &.first {
+          border-top: 1px solid @table-row-border-color;
 
-        &.selected::after {
-          // If header is invisible, selection of first row starts at 0
-          // Since we now have a top border we can move it to -1px again to cover the border
-          top: -1px;
+          &.selected::after {
+            // If header is invisible, selection of first row starts at 0
+            // Since we now have a top border we can move it to -1px again to cover the border
+            top: -1px;
+          }
+        }
+
+        &.inactive {
+          font-style: italic;
+
+          & > .table-cell.last > .text::after {
+            content: ' (' var(--inactive-lookup-row-suffix-text) ')';
+          }
         }
       }
 
@@ -286,9 +296,12 @@
     & > .tree-data {
       padding: @proposal-chooser-padding-y @proposal-chooser-padding-x;
 
-      & > .tree-node {
-        &.inactive {
-          font-style: italic;
+      & > .tree-node.inactive,
+      & > .animation-wrapper > .tree-node.inactive {
+        font-style: italic;
+
+        & > .text::after {
+          content: ' (' var(--inactive-lookup-row-suffix-text) ')';
         }
       }
     }

package/src/form/fields/splitbox/SplitBoxCollapseKeyStroke.js

@@ -16,6 +16,7 @@ export default class SplitBoxCollapseKeyStroke extends KeyStroke {
     super();
     this.field = splitBox;
     this.parseAndSetKeyStroke(keyStroke);
+    this.inheritAccessibility = false;
   }
 
   handle(event) {

package/src/form/fields/splitbox/SplitBoxFirstCollapseKeyStroke.js

@@ -16,6 +16,7 @@ export default class SplitBoxFirstCollapseKeyStroke extends KeyStroke {
     super();
     this.field = splitBox;
     this.parseAndSetKeyStroke(keyStroke);
+    this.inheritAccessibility = false;
   }
 
   handle(event) {

package/src/form/fields/splitbox/SplitBoxSecondCollapseKeyStroke.js

@@ -16,6 +16,7 @@ export default class SplitBoxSecondCollapseKeyStroke extends KeyStroke {
     super();
     this.field = splitBox;
     this.parseAndSetKeyStroke(keyStroke);
+    this.inheritAccessibility = false;
   }
 
   handle(event) {

package/src/form/fields/tabbox/TabAreaLayout.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
@@ -30,32 +30,37 @@ export default class TabAreaLayout extends AbstractLayout {
   }
 
   layout($container) {
-    let ellipsis = this.tabArea.ellipsis,
-      htmlContainer = HtmlComponent.get($container),
+    let htmlContainer = HtmlComponent.get($container),
       containerSize = htmlContainer.availableSize().subtract(htmlContainer.insets());
 
     // compute visible and overflown tabs
     this.preferredLayoutSize($container, {
       widthHint: containerSize.width
     });
+    this._layoutSelectionMarker();
+  }
 
-    if (this.overflowTabs.length > 0) {
-      ellipsis.setHidden(false);
-    }
-
-    this.visibleTabs.forEach(tabItem => {
-      tabItem.setOverflown(false);
-    });
-
-    this.overflowTabs.forEach(tabItem => {
-      tabItem.setOverflown(true);
-    });
+  _layoutSelectionMarker() {
+    let $selectionMarker = this.tabArea.$selectionMarker,
+      selectedTab = this.tabArea.selectedTab,
+      selectedItemBounds;
 
-    if (this.overflowTabs.length === 0) {
-      ellipsis.setHidden(true);
+    if (selectedTab) {
+      $selectionMarker.setVisible(true);
+      selectedItemBounds = graphics.bounds(selectedTab.$container);
+      $selectionMarker.cssLeft(selectedItemBounds.x);
+      $selectionMarker.cssWidth(selectedItemBounds.width);
+    } else {
+      $selectionMarker.setVisible(false);
     }
+  }
 
+  _updateEllipsis() {
+    let ellipsis = this.tabArea.ellipsis;
+    ellipsis.setHidden(this.overflowTabs.length < 1);
     ellipsis.setText(this.overflowTabs.length + '');
+    this.visibleTabs.forEach(tabItem => tabItem.setOverflown(false));
+    this.overflowTabs.forEach(tabItem => tabItem.setOverflown(true));
 
     ellipsis.setChildActions(this.overflowTabs.map(tab => {
       let menu = scout.create('Menu', {
@@ -73,73 +78,54 @@ export default class TabAreaLayout extends AbstractLayout {
       });
       return menu;
     }, this));
-
-    this._layoutSelectionMarker();
-  }
-
-  _layoutSelectionMarker() {
-    let $selectionMarker = this.tabArea.$selectionMarker,
-      selectedTab = this.tabArea.selectedTab,
-      selectedItemBounds;
-
-    if (selectedTab) {
-      $selectionMarker.setVisible(true);
-      selectedItemBounds = graphics.bounds(selectedTab.$container);
-      $selectionMarker.cssLeft(selectedItemBounds.x);
-      $selectionMarker.cssWidth(selectedItemBounds.width);
-    } else {
-      $selectionMarker.setVisible(false);
-    }
   }
 
   preferredLayoutSize($container, options) {
     let htmlComp = HtmlComponent.get($container),
       prefSize = new Dimension(0, 0),
-      prefWidth = Number.MAX_VALUE,
-      visibleTabItems = this.tabArea.visibleTabs(),
-      overflowableIndexes = visibleTabItems.map((tabItem, index) => {
-        if (tabItem.selected) {
-          return -1;
-        }
-        return index;
-      }).filter(index => index >= 0);
+      prefWidth = Number.MAX_VALUE;
+    this.visibleTabs = this.tabArea.visibleTabs();
+    let overflowableIndexes = this.visibleTabs.map((tabItem, index) => {
+      if (tabItem.selected) {
+        return -1;
+      }
+      return index;
+    }).filter(index => index >= 0);
 
     this.overflowTabs = [];
 
-    // consider avoid falsy 0 in tabboxes a 0 withHint will be used to calculate the minimum width
+    // consider avoid falsy 0 in tab-boxes a 0 withHint will be used to calculate the minimum width
     if (options.widthHint === 0 || options.widthHint) {
       prefWidth = options.widthHint - htmlComp.insets().horizontal();
     }
 
     // shortcut for minimum size.
     if (prefWidth <= 0) {
-      return this._minSize(visibleTabItems).add(htmlComp.insets());
+      return this._minSize(this.visibleTabs).add(htmlComp.insets());
     }
 
-    let overflowIndex = -1;
-    this._setFirstLastMarker(visibleTabItems);
-    prefSize = this._prefSize(visibleTabItems);
+    this._setFirstLastMarker(this.visibleTabs);
+    this._updateEllipsis();
+    prefSize = this._prefSize(this.visibleTabs);
+
     while (prefSize.width > prefWidth && overflowableIndexes.length > 0) {
-      overflowIndex = overflowableIndexes.splice(-1)[0];
-      this.overflowTabs.splice(0, 0, visibleTabItems[overflowIndex]);
-      visibleTabItems.splice(overflowIndex, 1);
-      this._setFirstLastMarker(visibleTabItems);
-      prefSize = this._prefSize(visibleTabItems);
+      let overflowIndex = overflowableIndexes.splice(-1)[0];
+      this.overflowTabs.splice(0, 0, this.visibleTabs[overflowIndex]);
+      this.visibleTabs.splice(overflowIndex, 1);
+      this._setFirstLastMarker(this.visibleTabs);
+      this._updateEllipsis(); // update ellipsis here already so that the prefSize on the next line is correct
+      prefSize = this._prefSize(this.visibleTabs);
     }
 
-    this.visibleTabs = visibleTabItems;
-
     // Use the total available space if spreading tabs evenly.
     if (this.tabArea.displayStyle === TabArea.DisplayStyle.SPREAD_EVEN) {
       return graphics.prefSize($container, options);
     }
-
     return graphics.exactPrefSize(prefSize.add(htmlComp.insets()), options);
   }
 
   _minSize(tabItems) {
-    let visibleTabItems = [],
-      prefSize;
+    let visibleTabItems = [];
     this.overflowTabs = tabItems.filter(tabItem => {
       if (tabItem.selected) {
         visibleTabItems.push(tabItem);
@@ -150,23 +136,21 @@ export default class TabAreaLayout extends AbstractLayout {
 
     this.visibleTabs = visibleTabItems;
     this._setFirstLastMarker(visibleTabItems);
-    prefSize = this._prefSize(visibleTabItems);
-
-    return prefSize;
+    return this._prefSize(visibleTabItems);
   }
 
   _prefSize(tabItems, considerEllipsis) {
-    let prefSize = tabItems.map(tabItem => this._tabItemSize(tabItem.htmlComp)
-      ).reduce((prefSize, itemSize) => {
+    let prefSize = tabItems
+      .map(tabItem => this._tabItemSize(tabItem))
+      .reduce((prefSize, itemSize) => {
         prefSize.height = Math.max(prefSize.height, itemSize.height);
         prefSize.width += itemSize.width;
         return prefSize;
-      }, new Dimension(0, 0)),
-      ellipsisSize = new Dimension(0, 0);
+      }, new Dimension(0, 0));
 
     considerEllipsis = scout.nvl(considerEllipsis, this.overflowTabs.length > 0);
     if (considerEllipsis) {
-      ellipsisSize = this._tabItemSize(this.tabArea.ellipsis.htmlComp);
+      let ellipsisSize = this._tabItemSize(this.tabArea.ellipsis);
       prefSize.height = Math.max(prefSize.height, ellipsisSize.height);
       prefSize.width += ellipsisSize.width;
     }
@@ -193,8 +177,8 @@ export default class TabAreaLayout extends AbstractLayout {
     }
   }
 
-  _tabItemSize(htmlComp) {
-    let prefSize,
+  _tabItemSize(item) {
+    let htmlComp = item.htmlComp, prefSize,
       classList = htmlComp.$comp.attr('class');
 
     // temporarily revert display style to default. otherwise the pref size of the tab item will be the size of the container.
@@ -208,6 +192,19 @@ export default class TabAreaLayout extends AbstractLayout {
     prefSize = htmlComp.prefSize({
       exact: true
     }).add(graphics.margins(htmlComp.$comp));
+    if (item.fieldStatus && item.fieldStatus.htmlComp) {
+      let statusOverflownAndHidden = item.overflown && !item.fieldStatus.visible;
+      if (statusOverflownAndHidden) {
+        // overflown tabs have no fieldStatus: explicitly set to visible so that the real consumed space can be computed
+        item.fieldStatus.setVisible(true);
+      }
+      let statusWidth = item.fieldStatus.htmlComp.prefSize({includeMargin: true}).width;
+      if (statusOverflownAndHidden) {
+        // restore
+        item.fieldStatus.setVisible(false);
+      }
+      prefSize.width += statusWidth;
+    }
 
     htmlComp.$comp.attrOrRemove('class', classList);
 

package/src/form/fields/tabbox/TabAreaLeftKeyStroke.js

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

package/src/form/fields/tabbox/TabAreaRightKeyStroke.js

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

package/src/form/fields/tabbox/TabBox.js

@@ -32,7 +32,6 @@ export default class TabBox extends CompositeField {
     this._addPreserveOnPropertyChangeProperties(['selectedTab']);
 
     this._tabBoxHeaderPropertyChangeHander = this._onTabBoxHeaderPropertyChange.bind(this);
-    this._selectedTabScrollTopChangeHandler = this._updateScrollShadow.bind(this);
   }
 
   /**
@@ -173,16 +172,17 @@ export default class TabBox extends CompositeField {
   _renderSelectedTab() {
     if (this.selectedTab) {
       this.selectedTab.render(this._$tabContent);
-      this.selectedTab.on('propertyChange:scrollTop', this._selectedTabScrollTopChangeHandler);
+      this.selectedTab.get$Scrollable().data('scroll-shadow-customizer', this._updateScrollShadow.bind(this));
     }
     if (this.rendered) {
+      this._updateScrollShadow();
       HtmlComponent.get(this._$tabContent).invalidateLayoutTree();
     }
   }
 
   _removeSelectedTab() {
     if (this.selectedTab) {
-      this.selectedTab.off('propertyChange:scrollTop', this._selectedTabScrollTopChangeHandler);
+      this.selectedTab.get$Scrollable().removeData('scroll-shadow-customizer');
       this.selectedTab.remove();
     }
   }
@@ -195,14 +195,11 @@ export default class TabBox extends CompositeField {
     let oldHasScrollShadowTop = this.$container.hasClass('has-scroll-shadow-top');
     this.$container.toggleClass('has-scroll-shadow-top', hasScrollShadowTop);
     if (oldHasScrollShadowTop !== hasScrollShadowTop) {
-      this.invalidateLayout();
+      this.invalidateLayoutTree(false);
     }
 
     // Enlarge header line if there is a shadow, but only if there is a header (controlled by labelVisible)
     fields.adjustStatusPositionForScrollShadow(this, () => hasScrollShadowTop && this.labelVisible);
-
-    // Prevent flickering of status icon
-    this.validateLayout();
   }
 
   setTabAreaStyle(tabAreaStyle) {
@@ -293,6 +290,10 @@ export default class TabBox extends CompositeField {
     this.header.focusTabItem(tabItem);
   }
 
+  getTabForItem(tabItem) {
+    return this.header.getTabForItem(tabItem);
+  }
+
   _onTabBoxHeaderPropertyChange(event) {
     if (event.propertyName === 'selectedTabItem') {
       this.setSelectedTab(event.newValue);

package/src/form/fields/tabbox/TabBox.less

@@ -74,7 +74,7 @@
   & > .menubar {
     position: absolute;
     #scout.menubar-background-color-inherit();
-    border-bottom-color: transparent;
+    border-bottom: none;
   }
 
   & > .status {
@@ -163,6 +163,7 @@
     display: inline-block;
     vertical-align: middle;
     padding: @tab-item-title-padding-top 0 @tab-item-title-padding-bottom;
+    margin-top: @text-margin-top;
 
     .tab-area.has-sub-label > & {
       padding-bottom: @group-box-title-with-sub-label-padding-bottom;

package/src/form/fields/tabbox/TabBoxHeader.js

@@ -89,6 +89,10 @@ export default class TabBoxHeader extends Widget {
     this.tabArea.focusTabItem(tabItem);
   }
 
+  getTabForItem(tabItem) {
+    return this.tabArea.getTabForItem(tabItem);
+  }
+
   _onTabBoxPropertyChange(event) {
     if (event.propertyName === 'menus') {
       this.menuBar.setMenuItems(this.tabBox.menus);