enable vertical arrow key navigation in luxon editors

vdm-io · Feb 19, 2023 · e61575d · e61575d
1 parent bda0577
commit e61575d
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 1 deletion.
diff --git a/dist/js/tabulator_esm.js b/dist/js/tabulator_esm.js
@@ -5722,6 +5722,7 @@ function range(cell, onRendered, success, cancel, editorParams){
 //input element
 function date(cell, onRendered, success, cancel, editorParams){
 	var inputFormat = editorParams.format,
+	vertNav = editorParams.verticalNavigation || "editor",
 	DT = inputFormat ? (window.DateTime || luxon.DateTime) : null;
 
 	//create and style input
@@ -5843,6 +5844,14 @@ function date(cell, onRendered, success, cancel, editorParams){
 			case 36:
 				e.stopPropagation();
 				break;
+
+			case 38: //up arrow
+			case 40: //down arrow
+				if(vertNav == "editor"){
+					e.stopImmediatePropagation();
+					e.stopPropagation();
+				}
+				break;
 		}
 	});
 
@@ -5852,6 +5861,7 @@ function date(cell, onRendered, success, cancel, editorParams){
 //input element
 function time(cell, onRendered, success, cancel, editorParams){
 	var inputFormat = editorParams.format,
+	vertNav = editorParams.verticalNavigation || "editor",
 	DT = inputFormat ? (window.DateTime || luxon.DateTime) : null, 
 	newDatetime;
 
@@ -5961,6 +5971,14 @@ function time(cell, onRendered, success, cancel, editorParams){
 			case 36:
 				e.stopPropagation();
 				break;
+
+			case 38: //up arrow
+			case 40: //down arrow
+				if(vertNav == "editor"){
+					e.stopImmediatePropagation();
+					e.stopPropagation();
+				}
+				break;
 		}
 	});
 
@@ -5970,6 +5988,7 @@ function time(cell, onRendered, success, cancel, editorParams){
 //input element
 function datetime(cell, onRendered, success, cancel, editorParams){
 	var inputFormat = editorParams.format,
+	vertNav = editorParams.verticalNavigation || "editor",
 	DT = inputFormat ? (window.DateTime || luxon.DateTime) : null, 
 	newDatetime;
 
@@ -6078,6 +6097,14 @@ function datetime(cell, onRendered, success, cancel, editorParams){
 			case 36:
 				e.stopPropagation();
 				break;
+
+			case 38: //up arrow
+			case 40: //down arrow
+				if(vertNav == "editor"){
+					e.stopImmediatePropagation();
+					e.stopPropagation();
+				}
+				break;
 		}
 	});
 

diff --git a/dist/js/tabulator_esm.js.map b/dist/js/tabulator_esm.js.map
diff --git a/src/js/modules/Edit/defaults/editors/date.js b/src/js/modules/Edit/defaults/editors/date.js
@@ -1,6 +1,7 @@
 //input element
 export default function(cell, onRendered, success, cancel, editorParams){
 	var inputFormat = editorParams.format,
+	vertNav = editorParams.verticalNavigation || "editor",
 	DT = inputFormat ? (window.DateTime || luxon.DateTime) : null;
 
 	//create and style input
@@ -122,6 +123,14 @@ export default function(cell, onRendered, success, cancel, editorParams){
 			case 36:
 				e.stopPropagation();
 				break;
+
+			case 38: //up arrow
+			case 40: //down arrow
+				if(vertNav == "editor"){
+					e.stopImmediatePropagation();
+					e.stopPropagation();
+				}
+				break;
 		}
 	});
 

diff --git a/src/js/modules/Edit/defaults/editors/datetime.js b/src/js/modules/Edit/defaults/editors/datetime.js
@@ -1,6 +1,7 @@
 //input element
 export default function(cell, onRendered, success, cancel, editorParams){
 	var inputFormat = editorParams.format,
+	vertNav = editorParams.verticalNavigation || "editor",
 	DT = inputFormat ? (window.DateTime || luxon.DateTime) : null, 
 	newDatetime;
 
@@ -109,6 +110,14 @@ export default function(cell, onRendered, success, cancel, editorParams){
 			case 36:
 				e.stopPropagation();
 				break;
+
+			case 38: //up arrow
+			case 40: //down arrow
+				if(vertNav == "editor"){
+					e.stopImmediatePropagation();
+					e.stopPropagation();
+				}
+				break;
 		}
 	});
 

diff --git a/src/js/modules/Edit/defaults/editors/time.js b/src/js/modules/Edit/defaults/editors/time.js
@@ -1,6 +1,7 @@
 //input element
 export default function(cell, onRendered, success, cancel, editorParams){
 	var inputFormat = editorParams.format,
+	vertNav = editorParams.verticalNavigation || "editor",
 	DT = inputFormat ? (window.DateTime || luxon.DateTime) : null, 
 	newDatetime;
 
@@ -110,6 +111,14 @@ export default function(cell, onRendered, success, cancel, editorParams){
 			case 36:
 				e.stopPropagation();
 				break;
+
+			case 38: //up arrow
+			case 40: //down arrow
+				if(vertNav == "editor"){
+					e.stopImmediatePropagation();
+					e.stopPropagation();
+				}
+				break;
 		}
 	});