onKeyDown events

Author: RafaelGB

src/components/cellTypes/CalendarCell.tsx

@@ -39,8 +39,7 @@ const CalendarCell = (calendarProps: CellComponentProps) => {
   /** state of cell value */
   const [showDatePicker, setShowDatePicker] = useState(false);
 
-  function handleSpanOnClick(event: any) {
-    event.preventDefault();
+  function handleSpanOnClick() {
     setShowDatePicker(true);
   }
 
@@ -104,6 +103,13 @@ const CalendarCell = (calendarProps: CellComponentProps) => {
       className={`${c("calendar")}`}
       onClick={handleSpanOnClick}
       style={{ width: column.getSize() }}
+      onKeyDown={(e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          handleSpanOnClick();
+        }
+      }}
+      tabIndex={0}
     >
       {parseLuxonDateToString(
         calendarCell,

src/components/cellTypes/CalendarTimeCell.tsx

@@ -39,8 +39,7 @@ const CalendarTimeCell = (calendarTimeProps: CellComponentProps) => {
   /** state of cell value */
   const [showDatePicker, setShowDatePicker] = useState(false);
 
-  function handleSpanOnClick(event: any) {
-    event.preventDefault();
+  function handleSpanOnClick() {
     setShowDatePicker(true);
   }
 
@@ -105,6 +104,13 @@ const CalendarTimeCell = (calendarTimeProps: CellComponentProps) => {
       className={`${c("calendar")}`}
       style={{ width: column.getSize() }}
       onClick={handleSpanOnClick}
+      onKeyDown={(e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          handleSpanOnClick();
+        }
+      }}
+      tabIndex={0}
     >
       {parseLuxonDatetimeToString(
         calendarCell,

src/components/cellTypes/NumberCell.tsx

@@ -1,6 +1,6 @@
 import { CellComponentProps } from "cdm/ComponentsModel";
 import { TableColumn } from "cdm/FolderModel";
-import { InputType } from "helpers/Constants";
+import { InputType, SUGGESTER_REGEX } from "helpers/Constants";
 import { c, getAlignmentClassname } from "helpers/StylesHelper";
 import React, {
   ChangeEventHandler,
@@ -95,8 +95,17 @@ const NumberCell = (props: CellComponentProps) => {
       className={c(
         getAlignmentClassname(tableColumn.config, configInfo.getLocalSettings())
       )}
-      onClick={handleEditableOnclick}
+      onDoubleClick={handleEditableOnclick}
       style={{ width: column.getSize() }}
+      onKeyDown={(e) => {
+        if (SUGGESTER_REGEX.CELL_VALID_KEYDOWN.test(e.key)) {
+          handleEditableOnclick();
+        } else if (e.key === "Enter") {
+          e.preventDefault();
+          handleEditableOnclick();
+        }
+      }}
+      tabIndex={0}
     >
       {(numberCell !== undefined && numberCell.toString()) || ""}
     </span>

src/components/cellTypes/RelationCell.tsx

@@ -4,7 +4,7 @@ import { InputType } from "helpers/Constants";
 import { c, getAlignmentClassname } from "helpers/StylesHelper";
 import { Notice } from "obsidian";
 import { Link } from "obsidian-dataview";
-import React, { MouseEventHandler, useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { DataviewService } from "services/DataviewService";
 import { ParseService } from "services/ParseService";
 import RelationEditor from "components/cellTypes/Editor/RelationEditor";
@@ -87,8 +87,7 @@ const RelationCell = (mdProps: CellComponentProps) => {
     setDirtyCell(false);
   };
 
-  const handleOnClick: MouseEventHandler<HTMLSpanElement> = (event) => {
-    event.stopPropagation();
+  const handleOnClick = () => {
     // Check if the column has a relation asotiated
     if (tableColumn.config.related_note_path) {
       setDirtyCell(true);
@@ -114,6 +113,13 @@ const RelationCell = (mdProps: CellComponentProps) => {
       className={c(
         getAlignmentClassname(tableColumn.config, configInfo.getLocalSettings())
       )}
+      onKeyDown={(e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          handleOnClick();
+        }
+      }}
+      tabIndex={0}
     />
   );
 };

src/components/cellTypes/SelectCell.tsx

@@ -143,6 +143,13 @@ const SelectCell = (popperProps: CellComponentProps) => {
           )}
           onClick={() => setShowSelect(true)}
           style={{ width: column.getSize() }}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              setShowSelect(true);
+            }
+          }}
+          tabIndex={0}
         >
           {cellValue ? (
             <Relationship value={cellValue} backgroundColor={getColor()} />

src/components/cellTypes/TagsCell.tsx

@@ -148,6 +148,13 @@ const TagsCell = (tagsProps: CellComponentProps) => {
           onClick={() => setShowSelectTags(true)}
           style={{ width: column.getSize() }}
           key={`tags-${row.index}-${tableColumn.key}`}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              setShowSelectTags(true);
+            }
+          }}
+          tabIndex={0}
         >
           {tagsCell ? (
             tagsCell