fix(ui5-tabcontainer): Fix overflow visibility (#1993)

When the tabcontaioner is no longer scrollable, the overflow arrows hides, the overflow popover should be closed as well. Previously it was automatically, but now as the focus is within the popover, it remains open, if not handled.

Author: ilhan007

packages/main/src/TabContainer.js

@@ -446,7 +446,8 @@ class TabContainer extends UI5Element {
 		this._updateScrolling();
 	}
 
-	_closeRespPopover() {
+	async _closeRespPopover() {
+		this.responsivePopover = await this._respPopover();
 		this.responsivePopover.close();
 	}
 
@@ -456,6 +457,10 @@ class TabContainer extends UI5Element {
 		this._scrollable = headerScrollContainer.offsetWidth < headerScrollContainer.scrollWidth;
 		this._scrollableBack = headerScrollContainer.scrollLeft > 0;
 		this._scrollableForward = Math.ceil(headerScrollContainer.scrollLeft) < headerScrollContainer.scrollWidth - headerScrollContainer.offsetWidth;
+
+		if (!this._scrollable) {
+			this._closeRespPopover();
+		}
 	}
 
 	_getHeader() {

packages/main/test/specs/TabContainer.spec.js

@@ -67,6 +67,24 @@ describe("TabContainer general interaction", () => {
 
 		assert.ok(!arrowLeft.isDisplayed(), "'Left Arrow' should be hidden after 'Left arrow' click");
 		assert.ok(arrowRight.isDisplayed(), "'Right Arrow' should be visible  after 'Left arrow' click");
+
+		// act: open overflow
+		const overflowBtn = browser.$("#tabContainerTextOnly").shadow$(".ui-tc__overflowButton");
+		overflowBtn.click();
+
+		// assert: the overflow popover is open.
+		const staticAreaItemClassName = browser.getStaticAreaItemClassName("#tabContainerTextOnly")
+		const overflowPopover = browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+		assert.strictEqual(overflowPopover.isDisplayedInViewport(), true,
+			"Popover is open.");
+
+		// act: resize, so the overflow button is not visible
+		browser.setWindowSize(1400, 1080);
+		browser.pause(500);
+
+		// assert: the overflow popover is closed.
+		assert.strictEqual(overflowPopover.isDisplayedInViewport(), false,
+			"Popover is closed.");
 	});
 
 	it("tests if content is scrollable when tabcontainer takes limited height by its parent", () => {