fix(ui5-option-custom): show focus outline (#9101)

SAP · Jun 1, 2024 · bf8366e · bf8366e
1 parent bf2d0aa
commit bf8366e
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/packages/main/src/Option.ts b/packages/main/src/Option.ts
@@ -4,6 +4,7 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import { IOption } from "./Select.js";
 import ListItemBase from "./ListItemBase.js";
+import Icon from "./Icon.js";
 
 // Template
 import OptionTemplate from "./generated/templates/OptionTemplate.lit.js";
@@ -37,6 +38,9 @@ import listItemAdditionalTextCss from "./generated/themes/ListItemAdditionalText
 		listItemIconCss,
 		optionBaseCss,
 	],
+	dependencies: [
+		Icon,
+	],
 })
 class Option extends ListItemBase implements IOption {
 	/**

diff --git a/packages/main/src/OptionCustom.ts b/packages/main/src/OptionCustom.ts
@@ -1,7 +1,7 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-
+import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import { IOption } from "./Select.js";
 import ListItemBase from "./ListItemBase.js";
 
@@ -73,6 +73,12 @@ class OptionCustom extends ListItemBase implements IOption {
 	@property({ type: String })
 	tooltip!: string;
 
+	onEnterDOM() {
+		if (isDesktop()) {
+			this.setAttribute("desktop", "");
+		}
+	}
+
 	get effectiveDisplayText() {
 		return this.displayText || this.textContent || "";
 	}