ability to change the behaviour of ENTER key to focus cell below

Author: OvidijusParsiunas

component/src/activeTable.ts

@@ -292,6 +292,12 @@ export class ActiveTable extends LitElement {
   @property({type: Object})
   columnDropdown?: ColumnDropdownSettingsDefault;
 
+  @property({
+    type: Boolean,
+    converter: LITElementTypeConverters.convertToBoolean,
+  })
+  enterKeyMoveDown = false;
+
   @property({type: Object})
   pagination?: boolean | Pagination;
 

component/src/elements/cell/cellsWithTextDiv/selectCell/baseEvents/selectCellTextBaseEvents.ts

@@ -1,4 +1,4 @@
-import {FocusNextCellFromSelectCell} from '../../../../../utils/focusedElements/focusNextCellFromSelectCell';
+import {FocusNextRowCell} from '../../../../../utils/focusedElements/focusNextRowCell';
 import {CellDropdownItem} from '../../../../dropdown/cellDropdown/cellDropdownItem';
 import {OptionButton} from '../../../../dropdown/cellDropdown/buttons/optionButton';
 import {ColumnDetailsT, ColumnsDetailsT} from '../../../../../types/columnDetails';
@@ -26,7 +26,7 @@ export class SelectCellTextBaseEvents {
       CellTextEvents.tabOutOfCell(at, rowIndex, columnIndex, event);
     } else if (event.key === KEYBOARD_KEY.ENTER) {
       event.preventDefault();
-      FocusNextCellFromSelectCell.focusOrBlurSelectNextCell(elements, rowIndex);
+      FocusNextRowCell.focusOrBlurSelect(elements, rowIndex);
     } else if (event.key === KEYBOARD_KEY.ARROW_UP) {
       event.preventDefault();
       CellDropdownItem.setSiblingItemOnCell(at, activeItems, 'previousSibling');

component/src/elements/cell/cellsWithTextDiv/text/cellTextEvents.ts

@@ -5,7 +5,7 @@ import {ActiveTable} from '../../../../activeTable';
 export class CellTextEvents {
   public static tabOutOfCell(at: ActiveTable, rowIndex: number, columnIndex: number, event: KeyboardEvent) {
     event.preventDefault();
-    DataCellEvents.keyDownCell.bind(at)(event);
+    DataCellEvents.keyDownCell.bind(at, rowIndex, columnIndex)(event);
     FocusNextColumnCellFromTextDiv.focusOrBlurNext(at, columnIndex, rowIndex);
   }
 }

component/src/elements/cell/dataCell/dataCellEvents.ts

@@ -2,6 +2,7 @@ import {OverwriteCellsViaCSVOnPaste} from '../../../utils/paste/CSV/overwriteCel
 import {UserKeyEventsStateUtils} from '../../../utils/userEventsState/userEventsStateUtils';
 import {DateCellInputElement} from '../cellsWithTextDiv/dateCell/dateCellInputElement';
 import {FocusedCellUtils} from '../../../utils/focusedElements/focusedCellUtils';
+import {FocusNextRowCell} from '../../../utils/focusedElements/focusNextRowCell';
 import {CaretPosition} from '../../../utils/focusedElements/caretPosition';
 import {CaretDisplayFix} from '../../../utils/browser/caretDisplayFix';
 import {CellDropdown} from '../../dropdown/cellDropdown/cellDropdown';
@@ -15,10 +16,13 @@ import {CellElement} from '../cellElement';
 import {CellEvents} from '../cellEvents';
 
 export class DataCellEvents {
-  public static keyDownCell(this: ActiveTable, event: KeyboardEvent) {
+  public static keyDownCell(this: ActiveTable, rowIndex: number, columnIndex: number, event: KeyboardEvent) {
+    const {elements, activeType} = this._columnsDetails[columnIndex];
     // REF-7
     if (event.key === KEYBOARD_KEY.TAB) {
       UserKeyEventsStateUtils.temporarilyIndicateEvent(this._userKeyEventsState, KEYBOARD_KEY.TAB);
+    } else if (event.key === KEYBOARD_KEY.ENTER && this.enterKeyMoveDown && !activeType.cellDropdownProps) {
+      FocusNextRowCell.focus(this, rowIndex, elements, event);
     }
   }
 
@@ -111,6 +115,6 @@ export class DataCellEvents {
     cellElement.onmousedown = () => {};
     cellElement.oninput = DataCellEvents.inputCell.bind(at, rowIndex, columnIndex);
     cellElement.onpaste = DataCellEvents.pasteCell.bind(at, rowIndex, columnIndex);
-    cellElement.onkeydown = DataCellEvents.keyDownCell.bind(at);
+    cellElement.onkeydown = DataCellEvents.keyDownCell.bind(at, rowIndex, columnIndex);
   }
 }

component/src/utils/focusedElements/focusNextCellFromSelectCell.ts

@@ -0,0 +1,27 @@
+import {ActiveTable} from '../../activeTable';
+import {CaretPosition} from './caretPosition';
+
+export class FocusNextRowCell {
+  // does not work in Safari
+  public static focus(at: ActiveTable, rowIndex: number, elements: HTMLElement[], event: KeyboardEvent) {
+    event.preventDefault();
+    const nextRowCell = elements[rowIndex + 1];
+    if (nextRowCell) {
+      nextRowCell.focus(); // required for firefox browser
+      CaretPosition.setToEndOfText(at, nextRowCell);
+    }
+  }
+
+  public static focusOrBlurSelect(elements: HTMLElement[], rowIndex: number) {
+    const nextColumnCell = elements[rowIndex + 1];
+    if (nextColumnCell) {
+      // needs to be mousedown in order to set focusedCell
+      nextColumnCell.dispatchEvent(new Event('mousedown'));
+      nextColumnCell.scrollIntoView({block: 'nearest'});
+      return nextColumnCell;
+    }
+    // if no next cell - blur current as the dropdown will be closed but the cursor would otherwise stay
+    (elements[rowIndex].children[0] as HTMLElement).blur();
+    return undefined;
+  }
+}