fix(ui5-multi-combobox): make focus outline visible (#2431)

FIXES: #2286

Author: ivoplashkov

packages/main/src/MultiComboBox.hbs

@@ -1,6 +1,4 @@
 <div class="ui5-multi-combobox-root"
-	@focusin={{rootFocusIn}}
-	@focusout={{rootFocusOut}}
 >
 	<span id="{{_id}}-hiddenText-nMore" class="ui5-hidden-text">{{nMoreCountText}}</span>
 
@@ -15,6 +13,7 @@
 		@ui5-show-more-items-press="{{_showMorePopover}}"
 		@ui5-token-delete="{{_tokenDelete}}"
 		@focusout="{{_tokenizerFocusOut}}"
+		@focusin="{{_tokenizerFocusIn}}"
 		@click={{_click}}
 		@keydown="{{_onTokenizerKeydown}}"
 		?expanded="{{_tokenizerExpanded}}"
@@ -46,6 +45,8 @@
 		@keydown="{{_onkeydown}}"
 		@keyup="{{_onkeyup}}"
 		@click={{_click}}
+		@focusin={{inputFocusIn}}
+		@focusout={{inputFocusOut}}
 		role="combobox"
 		aria-haspopup="listbox"
 		aria-expanded="{{open}}"

packages/main/src/MultiComboBox.js

@@ -222,7 +222,11 @@ const metadata = {
 			type: Boolean,
 		},
 
-		_rootFocused: {
+		focused: {
+			type: Boolean,
+		},
+
+		_tokenizerFocused: {
 			type: Boolean,
 		},
 
@@ -514,6 +518,8 @@ class MultiComboBox extends UI5Element {
 	}
 
 	_tokenizerFocusOut(event) {
+		this._tokenizerFocused = false;
+
 		const tokenizer = this.shadowRoot.querySelector("[ui5-tokenizer]");
 		const tokensCount = tokenizer.tokens.length - 1;
 
@@ -533,6 +539,11 @@ class MultiComboBox extends UI5Element {
 		}
 	}
 
+	_tokenizerFocusIn() {
+		this._tokenizerFocused = true;
+		this.focused = false;
+	}
+
 	_onkeyup() {
 		this._keyDown = false;
 	}
@@ -733,22 +744,26 @@ class MultiComboBox extends UI5Element {
 		return this.i18nBundle.getText(TOKENIZER_ARIA_CONTAIN_SEVERAL_TOKENS, iTokenCount);
 	}
 
-	rootFocusIn() {
+	inputFocusIn() {
 		if (!isPhone()) {
-			this._rootFocused = true;
+			this.focused = true;
 		}
 	}
 
-	rootFocusOut(event) {
+	inputFocusOut(event) {
 		if (!this.shadowRoot.contains(event.relatedTarget) && !this._deleting) {
-			this._rootFocused = false;
+			this.focused = false;
 		}
 	}
 
 	get editable() {
 		return !this.readonly;
 	}
 
+	get _isFocusInside() {
+		return this.focused || this._tokenizerFocused;
+	}
+
 	get selectedItemsListMode() {
 		return this.readonly ? "None" : "MultiSelect";
 	}
@@ -782,7 +797,7 @@ class MultiComboBox extends UI5Element {
 	}
 
 	get shouldDisplayOnlyValueStateMessage() {
-		return this._rootFocused && this.hasValueStateMessage && !this._iconPressed;
+		return this.focused && this.hasValueStateMessage && !this._iconPressed;
 	}
 
 	get valueStateTextMappings() {
@@ -816,7 +831,7 @@ class MultiComboBox extends UI5Element {
 	}
 
 	get _tokenizerExpanded() {
-		return (this._rootFocused || this.open) && !this.readonly;
+		return (this._isFocusInside || this.open) && !this.readonly;
 	}
 
 	get classes() {

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

@@ -16,6 +16,23 @@ describe("MultiComboBox general interaction", () => {
 			assert.ok(!popover.getProperty("opened"), "Popover should close");
 		});
 
+		it("Checks focus state", () => {
+			const mcb = browser.$("#multi1");
+			const input = mcb.shadow$("#ui5-multi-combobox-input");
+
+			input.click();
+
+			assert.ok(mcb.getProperty("focused"), "MultiComboBox should be focused.");
+
+			input.keys("ArrowLeft");
+
+			assert.notOk(mcb.getProperty("focused"), "MultiComboBox should no longer be focused.");
+
+			input.keys("ArrowRight");
+
+			assert.ok(mcb.getProperty("focused"), "MultiComboBox should be focused again.");
+		});
+
 		it("MultiComboBox open property is set correctly", () => {
 			const mcb = browser.$("#multi1");
 			const icon = browser.$("#multi1").shadow$("[input-icon]");
@@ -188,8 +205,6 @@ describe("MultiComboBox general interaction", () => {
 			let tokens = $("#multi1").shadow$$(".ui5-multi-combobox-token");
 			const input = $("#multi1").shadow$("input");
 
-			$("#multi1").setProperty("value", "");
-
 			input.click();
 			input.keys('Backspace');