Merge pull request #4517 from azmy60/fix/nav-while-editing

blur editor after pressing next/prev

Author: azmy60

src/js/modules/Edit/Edit.js

@@ -78,6 +78,10 @@ export default class Edit extends Module{
 			this.subscribe("keybinding-nav-up", this.navigateUp.bind(this, undefined));
 			this.subscribe("keybinding-nav-down", this.navigateDown.bind(this, undefined));
 		}
+    
+    // Add event handlers for other modules to access editing state and functionality
+		this.subscribe("edit-check-editing", this.checkEditing.bind(this));
+		this.subscribe("edit-cancel-cell", this.cancelEditEvent.bind(this));
 
 		if(Object.keys(this.table.options).includes("editorEmptyValue")){
 			this.convertEmptyValues = true;
@@ -451,6 +455,19 @@ export default class Edit extends Module{
 		return this.currentCell ? this.currentCell.getComponent() : false;
 	}
 
+	checkEditing(){
+		return !!this.currentCell;
+	}
+	
+	cancelEditEvent(){
+		if(this.currentCell){
+			this.cancelEdit();
+			return true;
+		}
+		return false;
+	}
+	
+	
 	clearEditor(cancel){
 		var cell = this.currentCell,
 		cellEl;

src/js/modules/SelectRange/SelectRange.js

@@ -33,6 +33,7 @@ export default class SelectRange extends Module {
 		this.registerTableOption("selectableRangeClearCells", false); //allow clearing of active range
 		this.registerTableOption("selectableRangeClearCellsValue", undefined); //value for cleared active range
 		this.registerTableOption("selectableRangeAutoFocus", true); //focus on a cell after resetRanges
+		this.registerTableOption("selectableRangeBlurEditOnNavigate", undefined); //prevent editing on navigation
 
 		this.registerTableFunction("getRangesData", this.getRangesData.bind(this));
 		this.registerTableFunction("getRanges", this.getRanges.bind(this));
@@ -132,8 +133,8 @@ export default class SelectRange extends Module {
 		this.subscribe("edit-editor-clear", this.finishEditingCell.bind(this));
 		this.subscribe("edit-blur", this.restoreFocus.bind(this));
 
-		this.subscribe("keybinding-nav-prev", this.keyNavigate.bind(this, "left"));
-		this.subscribe("keybinding-nav-next", this.keyNavigate.bind(this, "right"));
+		this.subscribe("keybinding-nav-prev", this.keyNavigate.bind(this, "prev"));
+		this.subscribe("keybinding-nav-next", this.keyNavigate.bind(this, "next"));
 		this.subscribe("keybinding-nav-left", this.keyNavigate.bind(this, "left"));
 		this.subscribe("keybinding-nav-right", this.keyNavigate.bind(this, "right"));
 		this.subscribe("keybinding-nav-up", this.keyNavigate.bind(this, "up"));
@@ -401,6 +402,25 @@ export default class SelectRange extends Module {
 	///////////////////////////////////
 
 	keyNavigate(dir, e){
+		if(this.options("selectableRangeBlurEditOnNavigate")){
+			const isEditing = this.chain("edit-check-editing");
+			
+			if(isEditing){
+				if(dir === 'next' || dir === 'prev'){
+					this.dispatch("edit-cancel-cell");
+				}else{
+					// Prevent navigating while editing except for next/prev
+					return false;
+				}
+			}
+		}
+
+		if (dir === 'prev') {
+			dir = 'left';
+		} else if (dir === 'next') {
+			dir = 'right';
+		}
+
 		if(this.navigate(false, false, dir)){
 			e.preventDefault();
 		}