little ux fixes

src/components/table/SelectionManager.ts

@@ -254,7 +254,8 @@ export class SelectionManager {
     const target = $(event.target);
     const header = target.closest('[data-header]');
     const resizer = target.closest('[data-resize]');
-    event.preventDefault();
+
+    if (!this.rootTable.focusManager.$currentFocusedCell?.isExist) event.preventDefault();
 
     if (header?.isExist && !isCell2(target) && !resizer?.isExist) {
       this.selectHeadRowCol(header);
@@ -290,7 +291,7 @@ export class SelectionManager {
   onKeyDownHandler(event: KeyboardEvent) {
     if (!isSelectionKey(event.key) || this.rootTable.focusManager.$currentFocusedCell?.isExist) {
       // TODO improve check
-      if (event.key.length === 1) {
+      if (event.key.length === 1 && !this.rootTable.focusManager.$currentFocusedCell?.isExist) {
         this.$currentSelectedCell && this.rootTable.focusManager.focusCell(this.$currentSelectedCell);
       }
 
@@ -343,7 +344,6 @@ export class SelectionManager {
 
     if (!side) return;
 
-    // $cell = this.getNeighbourCellBySide(side);
     $cell = this.getNeighbourCellBySide(side, this.$currentSelectedCell || this.$firstSelectedCell);
 
     if (event.ctrlKey && $cell?.isExist) {

src/components/table/Table.ts

@@ -3,6 +3,7 @@ import { BaseComponentOption } from 'components/excel/Excel';
 import { FocusManager } from 'components/table/FocusManager';
 import { SelectionManager } from 'components/table/SelectionManager';
 import { startCellId } from 'components/table/table.functions';
+import { parse } from 'core/utils';
 import * as actions from 'redux/action-creators';
 import { $, Dom } from 'core/Dom';
 import { ExcelComponent } from 'core/ExcelComponent';
@@ -14,7 +15,6 @@ import {
 } from 'redux/action-creators';
 import { createTable } from 'components/table/table.template';
 import { TableSizeType } from 'redux/types';
-import { parse } from 'core/utils';
 import { resizeHandler } from 'components/table/handlers/table.resize';
 import { initialStyleState } from 'src/constants';
 

src/core/Dom.ts

@@ -13,13 +13,16 @@ export class Dom implements DomClass {
   $el: HTMLElement;
 
   constructor(selector: SelectorType) {
-    // Could not find element with selector in DOM, need a check
-    if (typeof selector === 'string') {
-      const elementFromDOM = document.querySelector(selector);
-      if (!elementFromDOM) throw new Error(`Can't find element with "${selector}" selector`);
-      else this.$el = elementFromDOM as HTMLElement;
-    } else {
-      this.$el = selector as HTMLElement;
+    try {
+      if (typeof selector === 'string') {
+        const elementFromDOM = document.querySelector(selector);
+        if (!elementFromDOM) throw new Error(`Can't find element with "${selector}" selector`);
+        else this.$el = elementFromDOM as HTMLElement;
+      } else {
+        this.$el = selector as HTMLElement;
+      }
+    } catch (e) {
+      console.error(e.message);
     }
   }
 

src/styles/components/formula.scss

@@ -23,5 +23,6 @@
     width: 100%;
     height: 100%;
     color: #000;
+    overflow: hidden;
   }
 }