Skip to content

Commit

Permalink
[FIX] sap.m.Link. prevent default behavior on mobile
Browse files Browse the repository at this point in the history
Issue:
- The default navigation wasn't prevented on mobile
devices. The reason behind it is that we were listening
for the click event, which is emitted as simulated event
on mobile wihtin a timeout.

Solution:
- We are now listening for the native click event instead
of the simulated click event on mobile devides.

BCP: 002075129500006450822022
BCP: 002075129400004774092023
Change-Id: I40c31fcb2786a6829ed76d55672db001f54e7aff
  • Loading branch information
unazko committed Jun 30, 2023
1 parent 4c1c38f commit 841d728
Show file tree
Hide file tree
Showing 2 changed files with 40 additions and 7 deletions.
28 changes: 28 additions & 0 deletions src/sap.m/src/sap/m/Link.js
Original file line number Diff line number Diff line change
Expand Up @@ -303,6 +303,34 @@ function(
setRefLabelsHighlightAccKeysRef.call(this, false);
};

Link.prototype.onAfterRendering = function() {
if (!Device.system.desktop) {
var oAnchorElement = this.getDomRef();
// TODO: Adjust sap.m.internal.ObjectMarkerCustomLink rendering part of the sap.m.ObjectMarker implementation
if (!oAnchorElement) {
return;
}
oAnchorElement.removeEventListener("click", this._onClick);
if (oAnchorElement.getAttribute("href") == "#") {
oAnchorElement.addEventListener("click", this._onClick);
}
}
};

Link.prototype.exit = function() {
if (!Device.system.desktop) {
var oAnchorElement = this.getDomRef();
if (!oAnchorElement) {
return;
}
oAnchorElement.removeEventListener("click", this._onClick);
}
};

Link.prototype._onClick = function(oEvent) {
oEvent.preventDefault();
};

/**
* Handle the key down event for SPACE
* SHIFT or ESCAPE on pressed SPACE cancels the action
Expand Down
19 changes: 12 additions & 7 deletions src/sap.m/test/sap/m/qunit/Link.qunit.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,9 @@ sap.ui.define([
"sap/ui/core/dnd/DragInfo",
"sap/m/Panel",
"sap/m/library",
"sap/ui/thirdparty/jquery"
], function(qutils, createAndAppendDiv, Link, Text, KeyCodes, coreLibrary, Core, DragInfo, Panel, mobileLibrary, jQuery) {
"sap/ui/thirdparty/jquery",
"sap/ui/Device"
], function(qutils, createAndAppendDiv, Link, Text, KeyCodes, coreLibrary, Core, DragInfo, Panel, mobileLibrary, jQuery, Device) {
"use strict";

// shortcut for sap.ui.core.TextDirection
Expand Down Expand Up @@ -624,19 +625,22 @@ sap.ui.define([
QUnit.test("Prevent navigation", function(assert) {
// Prepare
var oLink = new Link({text: "text"}),
oFakeEvent = {preventDefault: function() {}},
oClickEvent = new Event("click", {bubbles: true, cancelable: true}),
oPressSpy = this.spy(oLink, "firePress"),
oPreventDefaultSpy = this.spy(oFakeEvent, "preventDefault");
oPreventDefaultSpy = this.spy(oClickEvent, "preventDefault");

var oDeviceStub = this.stub(Device, "system").value({ phone: true });

oLink.placeAt("qunit-fixture");
Core.applyChanges();

// Act
qutils.triggerEvent("click", oLink.getId(), oFakeEvent);
oLink.getDomRef().dispatchEvent(oClickEvent);

// Assert
assert.ok(oPressSpy.calledOnce, "Press event still fired");
assert.ok(oPreventDefaultSpy.calledOnce, "Default action is prevented");
// The event is prevented twice due to the native event handling and siumlated event handling
assert.ok(oPreventDefaultSpy.calledTwice, "Default action is prevented");

// Clean
oPreventDefaultSpy.resetHistory();
Expand All @@ -646,13 +650,14 @@ sap.ui.define([
Core.applyChanges();

// Act
qutils.triggerEvent("click", oLink.getId(), oFakeEvent);
oLink.getDomRef().dispatchEvent(oClickEvent);

// Assert
assert.ok(oPreventDefaultSpy.notCalled, "Navigation would not be prevented");

// Clean
oLink.destroy();
oDeviceStub.restore();
});

QUnit.test("The press event is prevented even if the link's DOM is moved into the static area", function(assert) {
Expand Down

0 comments on commit 841d728

Please sign in to comment.