Skip to content
This repository was archived by the owner on Mar 23, 2026. It is now read-only.

Commit efd4418

Browse files
author
Jihye Hong
committed
Fix the bug for dispatching events
* Fix the bug for dispatching events * Bring internal test cases about event from develop branch
1 parent 67acf05 commit efd4418

2 files changed

Lines changed: 139 additions & 30 deletions

File tree

‎polyfill/spatial-navigation-polyfill.js‎

Lines changed: 6 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,6 @@
2121
let mapOfBoundRect = null;
2222
let startingPoint = null; // Indicates global variables for spatnav (starting position)
2323

24-
let navnotargetPrevented = false; // Indicates the navnotarget event is prevented or not
25-
let navbeforefocusPrevented = false; // Indicates the navbeforefocus event is prevented or not
26-
2724
/**
2825
* Initiate the spatial navigation features of the polyfill.
2926
* This function defines which input methods trigger the spatial navigation behavior.
@@ -111,24 +108,6 @@
111108
document.addEventListener('mouseup', e => {
112109
startingPoint = {x: e.clientX, y: e.clientY};
113110
});
114-
115-
/*
116-
* navbeforefocus EventListener :
117-
* If the navbeforefocus event is triggered, then the navbeforefocusPrevented flag can be set
118-
* for define the prevented default behavior for the event
119-
*/
120-
document.body.addEventListener('navbeforefocus', e => {
121-
navbeforefocusPrevented = e.defaultPrevented;
122-
});
123-
124-
/*
125-
* navnotarget EventListener :
126-
* If the navnotarget event is triggered, then the navnotargetPrevented flag can be set
127-
* for define the prevented default behavior for the event
128-
*/
129-
document.body.addEventListener('navnotarget', e => {
130-
navnotargetPrevented = e.defaultPrevented;
131-
});
132111
}
133112

134113
/**
@@ -222,11 +201,11 @@
222201
/*
223202
* [event] navbeforefocus : Fired before spatial or sequential navigation changes the focus.
224203
*/
225-
createSpatNavEvents('beforefocus', bestCandidate, null, dir);
226-
if (!navbeforefocusPrevented) {
227-
bestCandidate.focus();
204+
if (!createSpatNavEvents('beforefocus', bestCandidate, null, dir))
228205
return true;
229-
}
206+
207+
bestCandidate.focus();
208+
return true;
230209
}
231210

232211
// When bestCandidate is not found within the scrollport of a container: Nothing
@@ -483,9 +462,7 @@
483462
break;
484463
}
485464

486-
if (triggeredEvent !== null) {
487-
containerElement.dispatchEvent(triggeredEvent);
488-
}
465+
return containerElement.dispatchEvent(triggeredEvent);
489466
}
490467

491468
/**
@@ -552,8 +529,7 @@
552529

553530
if ((option === 'visible') && scrollingController(container, dir)) return;
554531

555-
createSpatNavEvents('notarget', container, eventTarget, dir);
556-
if (navnotargetPrevented) break;
532+
if (!createSpatNavEvents('notarget', container, eventTarget, dir)) return;
557533

558534
// find the container
559535
if (container === document || container === document.documentElement) {

‎tests/internal/event-test.html‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
<!doctype html>
2+
<html lang=en>
3+
<meta charset="utf-8">
4+
<title>Spatnav sanity check</title>
5+
<script src="../../polyfill/spatial-navigation-polyfill.js"></script>
6+
<link rel="stylesheet" href="../../demo/sample/spatnav-style.css">
7+
<link rel="stylesheet" href="test.css">
8+
<script src="test.js"></script>
9+
<style>
10+
#d {
11+
width: 100px;
12+
height: 100px;
13+
overflow: scroll;
14+
}
15+
</style>
16+
<body onload="onload()">
17+
<div style="padding: 20px;">
18+
<button id="b1" class="box" style="top:100px; left:20px;"></button>
19+
<button id="b2" class="box" style="top:98px; left:180px;"></button>
20+
<div id="c1" class="container c1" tabindex="-1" style="position: relative; left:110px; width:500px; height:200px; overflow-x: scroll;">
21+
<div id="c2" class="container c2" style="position: relative; left:110px; width:250px; height:100px; --spatial-navigation-contain: contain;">
22+
<button id="c2b1" class="box b3" style="top:40px; left:60px;"></button>
23+
<button id="c2b2" class="box b3" style="top:30px; left:200px;"></button>
24+
</div>
25+
<button id="c1b2" class="box b2" style="top:-80px; left:300px;"></button>
26+
<button id="c1b3" class="box b2" style="top:-90px; left:420px;"></button>
27+
</div>
28+
<button id="b3" class="box" style="top:-119px; left:400px;"></button>
29+
<button id="b4" class="box" style="top:-120px; left:650px;"></button>
30+
<button id="b5" class="box" style="top:-120px; left:750px; visibility: hidden;"></button>
31+
</div>
32+
</body>
33+
<script>
34+
var onload = () => {
35+
testInit();
36+
let testNum = 1;
37+
let eventOccured = false;
38+
let targetElement;
39+
let causedTarget;
40+
let dir;
41+
42+
const navEventHandler = (e) => {
43+
console.log("navEventHandler")
44+
eventOccured = true;
45+
targetElement = e.target;
46+
causedTarget = e.detail.causedTarget;
47+
dir = e.detail.dir;
48+
e.preventDefault();
49+
}
50+
51+
(function () {
52+
document.body.addEventListener('navnotarget', navEventHandler);
53+
document.querySelector('#c2b2').focus();
54+
window.navigate('right');
55+
document.body.removeEventListener("navnotarget", navEventHandler);
56+
57+
setTimeout(
58+
testRun(function() {
59+
assert_equals(eventOccured, true);
60+
}, `navnotarget Event TC${testNum++}. #c2b2 button -> navigate('right') -> 'navnotarget' should be occured`),
61+
1000)
62+
})();
63+
64+
(function () {
65+
document.body.addEventListener('navnotarget', navEventHandler);
66+
document.querySelector('#c2b2').focus();
67+
window.navigate('right');
68+
document.body.removeEventListener("navnotarget", navEventHandler);
69+
70+
setTimeout(
71+
testRun(function() {
72+
assert_equals(targetElement, document.querySelector('#c2'));
73+
assert_equals(causedTarget, document.querySelector('#c2b2'));
74+
assert_equals(dir, 'right');
75+
}, `navnotarget Event TC${testNum++}. #c2b2 button -> navigate('right') -> 'navnotarget' event should have target information`),
76+
1000)
77+
})();
78+
79+
testRun(function() {
80+
document.body.addEventListener('navnotarget', navEventHandler);
81+
document.querySelector('#c1b3').focus();
82+
window.navigate('right');
83+
document.body.removeEventListener("navnotarget", navEventHandler);
84+
85+
assert_equals(document.activeElement, document.querySelector('#c1b3'));
86+
}, `navnotarget Event TC${testNum++}. 'navnotarget' event should allow prevent defalut.`);
87+
88+
89+
testNum = 1;
90+
91+
(function () {
92+
eventOccured = false;
93+
document.body.addEventListener('navbeforefocus', navEventHandler);
94+
document.querySelector('#c2b2').focus();
95+
window.navigate('right');
96+
document.body.removeEventListener("navbeforefocus", navEventHandler);
97+
98+
setTimeout(
99+
testRun(function() {
100+
assert_equals(eventOccured, true);
101+
}, `navbeforefocus Event TC${testNum++}. #c2b2 button -> navigate('right') -> 'navbeforefocus' should be occured`),
102+
1000)
103+
})();
104+
105+
(function () {
106+
targetElement = null;
107+
dir = null;
108+
document.body.addEventListener('navbeforefocus', navEventHandler);
109+
document.querySelector('#c2b2').focus();
110+
window.navigate('right');
111+
document.body.removeEventListener("navbeforefocus", navEventHandler);
112+
113+
setTimeout(
114+
testRun(function() {
115+
assert_equals(targetElement, document.querySelector('#c1b3'));
116+
assert_equals(dir, 'right');
117+
}, `navbeforefocus Event TC${testNum++}. #c2b2 button -> navigate('right') -> 'navbeforefocus' event should have target information`),
118+
1000)
119+
})();
120+
121+
testRun(function() {
122+
document.body.addEventListener('navbeforefocus', navEventHandler);
123+
document.querySelector('#c1b3').focus();
124+
window.navigate('right');
125+
document.body.removeEventListener("navbeforefocus", navEventHandler);
126+
127+
assert_equals(document.activeElement, document.querySelector('#c1b3'));
128+
}, `navbeforefocus Event TC${testNum++}. 'navbeforefocus' event should allow prevent defalut.`);
129+
130+
}
131+
132+
</script>
133+
</html>

0 commit comments

Comments
 (0)