From 16987ebaf1dc95ebdc07ab3d9c3430ed10969583 Mon Sep 17 00:00:00 2001
From: ilhan orhan <ilhan.myumyun@sap.com>
Date: Mon, 15 Jun 2020 17:26:19 +0300
Subject: [PATCH] fix(ui5-link): fix "click twice" issue in Safari (#1799)
 (#1800)

The usage of pseudo elements such as ::after, ::before has side effects on iOs/macOS making the first click to just focus the element and the second to be registered as click. Now, we set the focus with outline, instead of pseudo element. Note: in IE, the focus will be 1px wider on all sides, compared to Safari, Chrome and FF as the outline-offset is not supported.

FIXES: #1796
---
 packages/main/src/themes/Link.css                  | 14 +++-----------
 packages/main/src/themes/base/Link-parameters.css  |  1 -
 .../src/themes/sap_belize_hcb/Link-parameters.css  |  5 -----
 .../themes/sap_belize_hcb/parameters-bundle.css    |  2 +-
 .../src/themes/sap_belize_hcw/Link-parameters.css  |  5 -----
 .../themes/sap_belize_hcw/parameters-bundle.css    |  2 +-
 6 files changed, 5 insertions(+), 24 deletions(-)
 delete mode 100644 packages/main/src/themes/sap_belize_hcb/Link-parameters.css
 delete mode 100644 packages/main/src/themes/sap_belize_hcw/Link-parameters.css

diff --git a/packages/main/src/themes/Link.css b/packages/main/src/themes/Link.css
index ca1f4fd6f626..f2289e3bc818 100644
--- a/packages/main/src/themes/Link.css
+++ b/packages/main/src/themes/Link.css
@@ -10,6 +10,7 @@
 	font-family: var(--sapFontFamily);
 	font-size: var(--sapFontSize);
 	cursor: pointer;
+	outline: none;
 }
 
 :host([disabled]) {
@@ -65,16 +66,7 @@
 }
 
 .ui5-link-root:focus {
+	outline-offset: -1px;
+	outline: 1px dotted var(--sapContent_FocusColor);
 	text-decoration: underline;
 }
-
-.ui5-link-root:focus::after {
-	content: "";
-	width: var(--_ui5_link_outline_element_size);
-	height: var(--_ui5_link_outline_element_size);
-	position: absolute;
-	left: 0px;
-	border: 1px dotted var(--sapContent_FocusColor);
-	top: 0;
-	outline: none;
-}
diff --git a/packages/main/src/themes/base/Link-parameters.css b/packages/main/src/themes/base/Link-parameters.css
index c81c488a95a8..152ff7f765a6 100644
--- a/packages/main/src/themes/base/Link-parameters.css
+++ b/packages/main/src/themes/base/Link-parameters.css
@@ -1,4 +1,3 @@
 :root {
 	--_ui5_link_opacity: 0.5;
-	--_ui5_link_outline_element_size: calc(100% - 0.125rem);
 }
\ No newline at end of file
diff --git a/packages/main/src/themes/sap_belize_hcb/Link-parameters.css b/packages/main/src/themes/sap_belize_hcb/Link-parameters.css
deleted file mode 100644
index 4847d21c3042..000000000000
--- a/packages/main/src/themes/sap_belize_hcb/Link-parameters.css
+++ /dev/null
@@ -1,5 +0,0 @@
-@import "../base/Link-parameters.css";
-
-:root {
-	--_ui5_link_outline_element_size: calc(100% - 0.1875rem);
-}
diff --git a/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css b/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css
index e436e1b55580..4dd43d81b093 100644
--- a/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css
+++ b/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css
@@ -10,7 +10,7 @@
 @import "../base/GroupHeaderListItem-parameters.css";
 @import "./Input-parameters.css";
 @import "./InputIcon-parameters.css";
-@import "./Link-parameters.css";
+@import "../base/Link-parameters.css";
 @import "../base/List-parameters.css";
 @import "./ListItemBase-parameters.css";
 @import "./MonthPicker-parameters.css";
diff --git a/packages/main/src/themes/sap_belize_hcw/Link-parameters.css b/packages/main/src/themes/sap_belize_hcw/Link-parameters.css
deleted file mode 100644
index 4847d21c3042..000000000000
--- a/packages/main/src/themes/sap_belize_hcw/Link-parameters.css
+++ /dev/null
@@ -1,5 +0,0 @@
-@import "../base/Link-parameters.css";
-
-:root {
-	--_ui5_link_outline_element_size: calc(100% - 0.1875rem);
-}
diff --git a/packages/main/src/themes/sap_belize_hcw/parameters-bundle.css b/packages/main/src/themes/sap_belize_hcw/parameters-bundle.css
index a7a68928d1e0..95522dad65ed 100644
--- a/packages/main/src/themes/sap_belize_hcw/parameters-bundle.css
+++ b/packages/main/src/themes/sap_belize_hcw/parameters-bundle.css
@@ -10,7 +10,7 @@
 @import "../base/GroupHeaderListItem-parameters.css";
 @import "./Input-parameters.css";
 @import "./InputIcon-parameters.css";
-@import "./Link-parameters.css";
+@import "../base/Link-parameters.css";
 @import "../base/List-parameters.css";
 @import "./ListItemBase-parameters.css";
 @import "./MonthPicker-parameters.css";