diff --git a/frontend/app/src/app/modules/data/elements/external-link.component.ts b/frontend/app/src/app/modules/data/elements/external-link.component.ts
index 7e463ed6..49f42653 100644
--- a/frontend/app/src/app/modules/data/elements/external-link.component.ts
+++ b/frontend/app/src/app/modules/data/elements/external-link.component.ts
@@ -14,7 +14,8 @@
*/
import {Component, Input} from '@angular/core';
-import {SimpleBrowser} from '../../../util/browser.factory';
+import {Browser} from '@capacitor/browser';
+import {Capacitor} from '@capacitor/core';
@Component({
selector: 'stapps-external-link',
@@ -26,10 +27,32 @@ export class ExternalLinkComponent {
@Input() text: string;
- constructor(private browser: SimpleBrowser) {}
+ get url(): string {
+ try {
+ return new URL(this.link).href;
+ } catch {
+ return '';
+ }
+ }
- onLinkClick(url: string) {
- // make sure if the url is valid and then open it in the browser (prevent problem in iOS)
- this.browser.open(new URL(url).href);
+ onLinkClick(event: MouseEvent) {
+ if (!this.url) {
+ event.preventDefault();
+ return;
+ }
+
+ // In a normal browser we deliberately do nothing here.
+ // The regular element handles the navigation.
+ if (!Capacitor.isNativePlatform()) {
+ return;
+ }
+
+ // In the native iOS/Android app we prevent the WebView navigation
+ // and open the URL in the system-provided in-app browser instead.
+ event.preventDefault();
+
+ void Browser.open({
+ url: this.url,
+ });
}
}
diff --git a/frontend/app/src/app/modules/data/elements/external-link.html b/frontend/app/src/app/modules/data/elements/external-link.html
index c4abb899..52ec6224 100644
--- a/frontend/app/src/app/modules/data/elements/external-link.html
+++ b/frontend/app/src/app/modules/data/elements/external-link.html
@@ -12,4 +12,7 @@
~ You should have received a copy of the GNU General Public License along with
~ this program. If not, see .
-->
-{{ text }}
+
+ {{ text }}
+
+