FIX: Ctrl + S shortcut was not working when an editor was active 2023.1

frontend-html/src/gui/Components/ScreenElements/Editors/DateTimeEditor/DateEditorModel.ts

@@ -23,6 +23,7 @@ import { toOrigamServerString } from "@origam/utils";
 import { getDefaultCsDateFormatDataFromCookie } from "utils/cookies";
 import DateCompleter from "gui/Components/ScreenElements/Editors/DateCompleter";
 import moment, { Moment } from "moment";
+import { isRefreshShortcut, isSaveShortcut } from "utils/keyShortcuts";
 
 export interface IEditorState{
   value: string | null;
@@ -99,7 +100,12 @@ export class DateEditorModel {
   }
 
   @action.bound handleKeyDown(event: any) {
-    if (event.key === "Enter" || event.key === "Tab") {
+    if (
+      event.key === "Enter" ||
+      event.key === "Tab" ||
+      isSaveShortcut(event) ||
+      isRefreshShortcut(event)
+    ) {
       const completedMoment = this.autoCompletedMoment;
       if (completedMoment) {
         this.onChange?.(event, toOrigamServerString(completedMoment));

frontend-html/src/gui/Components/ScreenElements/Editors/NumberEditor.tsx

@@ -29,6 +29,7 @@ import {
 import { IFocusable } from "../../../../model/entities/FormFocusManager";
 import { IProperty } from "model/entities/types/IProperty";
 import { runInFlowWithHandler } from "utils/runInFlowWithHandler";
+import { isRefreshShortcut, isSaveShortcut } from "utils/keyShortcuts";
 
 export class NumberEditor extends React.Component<{
   value: string | number | null;
@@ -155,7 +156,12 @@ export class NumberEditor extends React.Component<{
     await runInFlowWithHandler({
       ctx: this.props.property,
       action: async () => {
-        if (event.key === "Enter" || event.key === "Tab"){
+        if (
+          event.key === "Enter" ||
+          event.key === "Tab" ||
+          isSaveShortcut(event) ||
+          isRefreshShortcut(event)
+        ){
           await this.onChange();
         }
         this.props.onKeyDown && this.props.onKeyDown(event);

frontend-html/src/gui/Components/ScreenElements/Editors/TextEditor.tsx

@@ -33,6 +33,7 @@ import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
 import { IDockType } from "model/entities/types/IProperty";
 import { AutoSizer, List, MultiGrid } from "react-virtualized";
 import { bind } from "bind-decorator";
+import { isRefreshShortcut, isSaveShortcut } from "utils/keyShortcuts";
 
 @observer
 export class TextEditor extends React.Component<{
@@ -58,7 +59,6 @@ export class TextEditor extends React.Component<{
   dock?: IDockType;
 }> {
   disposers: any[] = [];
-  currentValue = this.props.value;
   lastAutoUpdatedValue = this.props.value;
   updateInterval: NodeJS.Timeout | undefined;
   refGrid = React.createRef<MultiGrid>();
@@ -131,6 +131,9 @@ export class TextEditor extends React.Component<{
       this.props.onChange?.(null, newValue);
       return 
     }
+    if(isSaveShortcut(event) || isRefreshShortcut(event)){
+      this.onChange(event);
+    }
     this.props.onKeyDown?.(event)
   }
 
@@ -182,6 +185,11 @@ export class TextEditor extends React.Component<{
     return S.readonlyDiv + " " + S.input + " " + (isMultiLine(this.props.value) ? S.scrollY : S.noScrollY);
   }
 
+  private onChange(event: any) {
+    this.props.onChange && this.props.onChange(event, event.target.value)
+    this.updateTextOverflowState();
+  }
+
   private renderValueTag() {
     const maxLength = this.props.maxLength === 0 ? undefined : this.props.maxLength;
     if (this.props.isRichText) {
@@ -206,10 +214,7 @@ export class TextEditor extends React.Component<{
           <div className={S.richTextWrappContainer} >
               <RichTextEditor 
                 value={this.props.value ?? ""}
-                onChange={(newValue: any) => {
-                  this.currentValue = newValue;
-                  this.props.onChange?.(undefined, newValue);
-                }}
+                onChange={(event: any) => this.onChange(event)}
                 refInput={this.refInput}
                 onBlur={this.props.onEditorBlur}
                 onFocus={this.handleFocus}
@@ -230,11 +235,7 @@ export class TextEditor extends React.Component<{
           readOnly={this.props.isReadOnly}
           maxLength={maxLength}
           ref={this.refInput}
-          onChange={(event: any) => {
-            this.props.onChange && this.props.onChange(event, event.target.value)
-            this.updateTextOverflowState();
-          }
-          }
+          onChange={(event: any) => this.onChange(event)}
           onKeyDown={this.handleKeyDown}
           onClick={this.props.onClick}
           onDoubleClick={this.props.onDoubleClick}
@@ -290,10 +291,7 @@ export class TextEditor extends React.Component<{
           readOnly={this.props.isReadOnly}
           ref={this.refInput}
           maxLength={maxLength}
-          onChange={(event: any) => {
-            this.currentValue = event.target.value;
-            this.props.onChange && this.props.onChange(event, event.target.value);
-          }}
+          onChange={(event: any) => this.onChange(event)}
           onKeyDown={this.handleKeyDown}
           onDoubleClick={this.props.onDoubleClick}
           onClick={this.props.onClick}

frontend-html/src/gui/Workbench/ScreenArea/FormView/FormViewEditor.tsx

@@ -42,19 +42,22 @@ import { DomEvent } from "leaflet";
 import { onDropdownEditorClick } from "model/actions/DropdownEditor/onDropdownEditorClick";
 import { shadeHexColor } from "utils/colorUtils";
 import { getIsFormScreenDirty } from "model/selectors/FormScreen/getisFormScreenDirty";
-import { runInFlowWithHandler } from "utils/runInFlowWithHandler";
+import { runGeneratorInFlowWithHandler, runInFlowWithHandler } from "utils/runInFlowWithHandler";
 import ColorEditor from "gui/Components/ScreenElements/Editors/ColorEditor";
 import { CellAlignment } from "gui/Components/ScreenElements/Table/TableRendering/cells/cellAlignment";
 import { flashColor2htmlColor, htmlColor2FlashColor } from "@origam/utils";
 import {
   isAddRecordShortcut,
   isDeleteRecordShortcut,
-  isDuplicateRecordShortcut, isFilterRecordShortcut,
+  isDuplicateRecordShortcut,
+  isFilterRecordShortcut,
+  isRefreshShortcut,
   isSaveShortcut
 } from "utils/keyShortcuts";
 import { onCreateRowClick } from "model/actions-ui/DataView/onCreateRowClick";
 import { onEscapePressed } from "model/actions-ui/DataView/onEscapePressed";
 import { flushCurrentRowData } from "model/actions/DataView/TableView/flushCurrentRowData";
+import { getFormScreenLifecycle } from "model/selectors/FormScreen/getFormScreenLifecycle";
 import { onDeleteRowClick } from "model/actions-ui/DataView/onDeleteRowClick";
 import { onCopyRowClick } from "model/actions-ui/DataView/onCopyRowClick";
 import { onFilterButtonClick } from "model/actions-ui/DataView/onFilterButtonClick";
@@ -348,6 +351,28 @@ export class FormViewEditor extends React.Component<{
             await onCreateRowClick(dataView)(event);
             return;
           }
+          if(isSaveShortcut(event)){
+            await runGeneratorInFlowWithHandler({
+              ctx: dataView,
+              generator: function*() {
+                yield*flushCurrentRowData(dataView)();
+                const formScreenLifecycle = getFormScreenLifecycle(dataView);
+                yield*formScreenLifecycle.onSaveSession();
+              }()
+            });
+            return;
+          }
+          if(isRefreshShortcut(event)){
+            await runGeneratorInFlowWithHandler({
+              ctx: dataView,
+              generator: function*() {
+                yield*flushCurrentRowData(dataView)();
+                const formScreenLifecycle = getFormScreenLifecycle(dataView);
+                yield*formScreenLifecycle.onRequestScreenReload();
+              }()
+            });
+            return;
+          }
           if (isAddRecordShortcut(event)) {
             await onCreateRowClick(dataView)(event);
             return;

frontend-html/src/gui/connections/CScreenToolbar.tsx

@@ -219,7 +219,11 @@ export class CScreenToolbar extends React.Component<{}> {
                 <ScreenToolbarAction
                   className={actionButtonsState.isDirty ? "isRed isHoverGreen" : ""}
                   onClick={onSaveSessionClick(actionButtonsState.formScreen)}
-                  onShortcut={onSaveSessionClick(actionButtonsState.formScreen)}
+                  onShortcut={event => {
+                    if(event.target.tagName !== "INPUT"){
+                      onSaveSessionClick(actionButtonsState.formScreen)
+                    }
+                  }}
                   id={"saveButton"}
                   shortcutPredicate={isSaveShortcut}
                   icon={
@@ -235,7 +239,11 @@ export class CScreenToolbar extends React.Component<{}> {
               {actionButtonsState.isRefreshButtonVisible && (
                 <ScreenToolbarAction
                   onClick={onRefreshSessionClick(actionButtonsState.formScreen)}
-                  onShortcut={onRefreshSessionClick(actionButtonsState.formScreen)}
+                  onShortcut={event => {
+                    if(event.target.tagName !== "INPUT"){
+                      onRefreshSessionClick(actionButtonsState.formScreen)
+                    }
+                  }}
                   id={"refreshButton"}
                   className={"isHoverBlue"}
                   shortcutPredicate={isRefreshShortcut}

frontend-html/src/model/actions-ui/DataView/TableView/onFieldKeyDown.ts

@@ -33,13 +33,14 @@ import {
   isAddRecordShortcut,
   isDeleteRecordShortcut,
   isDuplicateRecordShortcut,
-  isFilterRecordShortcut
+  isFilterRecordShortcut, isRefreshShortcut
 } from "utils/keyShortcuts";
 import { onDeleteRowClick } from "model/actions-ui/DataView/onDeleteRowClick";
 import { onCreateRowClick } from "model/actions-ui/DataView/onCreateRowClick";
 import { onCopyRowClick } from "model/actions-ui/DataView/onCopyRowClick";
 import { onFilterButtonClick } from "model/actions-ui/DataView/onFilterButtonClick";
 import { onEscapePressed } from "model/actions-ui/DataView/onEscapePressed";
+import { getFormScreenLifecycle } from "model/selectors/FormScreen/getFormScreenLifecycle";
 
 export function onFieldKeyDown(ctx: any) {
 
@@ -131,13 +132,25 @@ export function onFieldKeyDown(ctx: any) {
           if (isSaveShortcut(event)) {
             tablePanelView.setEditing(false);
             yield*flushCurrentRowData(ctx)();
-          } else if (isAddRecordShortcut(event)) {
+            const formScreenLifecycle = getFormScreenLifecycle(ctx);
+            yield*formScreenLifecycle.onSaveSession();
+          }
+          else if (isRefreshShortcut(event)) {
+            tablePanelView.setEditing(false);
+            yield*flushCurrentRowData(ctx)();
+            const formScreenLifecycle = getFormScreenLifecycle(ctx);
+            yield*formScreenLifecycle.onRequestScreenReload();
+          }
+          else if (isAddRecordShortcut(event)) {
             yield onCreateRowClick(dataView)(event);
-          } else if (isDeleteRecordShortcut(event)) {
+          }
+          else if (isDeleteRecordShortcut(event)) {
             yield onDeleteRowClick(dataView)(event);
-          } else if (isDuplicateRecordShortcut(event)) {
+          }
+          else if (isDuplicateRecordShortcut(event)) {
             yield onCopyRowClick(dataView)(event);
-          } else if (isFilterRecordShortcut(event)) {
+          }
+          else if (isFilterRecordShortcut(event)) {
             yield onFilterButtonClick(dataView)(event);
           }
         }

frontend-html/src/model/entities/FormScreenLifecycle/FormScreenLifecycle.tsx

@@ -208,6 +208,7 @@ export class FormScreenLifecycle02 implements IFormScreenLifecycle02 {
   }
 
   *onRequestScreenReload(): Generator<unknown, any, unknown> {
+    yield*this.flushData();
     if (!getIsFormScreenDirty(this) || getIsSuppressSave(this)) {
       yield*this.refreshSession();
       return;