fix: mandatory date column enforcement

app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/AddNewRow2_spec.js

@@ -87,6 +87,18 @@ describe("Validation flow", { tags: ["@tag.Widget", "@tag.Table"] }, () => {
     cy.get(`.t--inlined-cell-editor-has-error`).should("exist");
     _.propPane.UpdatePropertyFieldValue("Max", "");
 
+    // check that date isRequired validation is working
+    cy.get(commonlocators.changeColType).last().click();
+    cy.get(".t--dropdown-option").children().contains("Date").click();
+    cy.wait("@updateLayout");
+    cy.enterTableCellValue(0, 0, "");
+    cy.get(`.t--inlined-cell-editor-has-error`).should("exist");
+
+    // revert to Number for remainder of tests
+    cy.get(commonlocators.changeColType).last().click();
+    cy.get(".t--dropdown-option").children().contains("Number").click();
+    cy.wait("@updateLayout");
+
     cy.get(".t--discard-new-row").click({ force: true });
   });
 

app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/Date_column_editing_1_spec.ts

@@ -180,7 +180,7 @@ describe(
       agHelper.AssertCSS(
         table._editCellEditor,
         "border",
-        "1px solid rgb(255, 255, 255)",
+        "1px solid rgb(242, 43, 43)",
       );
       agHelper
         .GetText(`${table._tableRow1Child3} ${locators._inputField}`)

app/client/src/widgets/TableWidgetV2/component/cellComponents/DateCell.tsx

@@ -169,6 +169,7 @@ export const DateCell = (props: DateComponentProps) => {
     isCellEditable,
     isCellEditMode,
     isCellVisible,
+    isEditableCellValid,
     isHidden,
     isNewRow,
     isRequired,
@@ -195,6 +196,10 @@ export const DateCell = (props: DateComponentProps) => {
   const [isValid, setIsValid] = useState(true);
   const [showRequiredError, setShowRequiredError] = useState(false);
   const contentRef = useRef<HTMLDivElement>(null);
+  const isCellCompletelyValid = useMemo(
+    () => isEditableCellValid && isValid,
+    [isEditableCellValid, isValid],
+  );
 
   const valueInISOFormat = useMemo(() => {
     if (typeof value !== "string") return "";
@@ -272,16 +277,16 @@ export const DateCell = (props: DateComponentProps) => {
         accentColor={accentColor}
         allowCellWrapping={allowCellWrapping}
         className={`${hasFocus ? FOCUS_CLASS : ""} t--inlined-cell-editor ${
-          !isValid && "t--inlined-cell-editor-has-error"
+          !isCellCompletelyValid && "t--inlined-cell-editor-has-error"
         }`}
         compactMode={compactMode}
-        isEditableCellValid={isValid}
+        isEditableCellValid={isCellCompletelyValid}
         paddedInput
         textSize={textSize}
         verticalAlignment={verticalAlignment}
       >
         <ErrorTooltip
-          isOpen={showRequiredError && !isValid}
+          isOpen={showRequiredError && !isCellCompletelyValid}
           message={
             validationErrorMessage ||
             createMessage(INPUT_WIDGET_DEFAULT_VALIDATION_ERROR)

app/client/src/widgets/TableWidgetV2/widget/derived.js

@@ -851,7 +851,7 @@ export default {
     };
 
     let editableColumns = [];
-    const validatableColumns = ["text", "number", "currency"];
+    const validatableColumns = ["text", "number", "currency", "date"];
 
     if (props.isAddRowInProgress) {
       Object.values(props.primaryColumns)

app/client/src/widgets/TableWidgetV2/widget/index.tsx

@@ -2654,31 +2654,29 @@ class TableWidgetV2 extends BaseWidget<TableWidgetProps, WidgetState> {
     value: string,
     onSubmit?: string,
   ) => {
-    if (this.isColumnCellValid(alias)) {
-      const { commitBatchMetaUpdates } = this.props;
-
-      this.pushTransientTableDataActionsUpdates({
-        [ORIGINAL_INDEX_KEY]: this.getRowOriginalIndex(rowIndex),
-        [alias]: value,
-      });
+    const { commitBatchMetaUpdates } = this.props;
 
-      if (onSubmit && this.props.editableCell?.column) {
-        //since onSubmit is truthy this makes action truthy as well, so we can push this event
-        this.pushOnColumnEvent({
-          rowIndex: rowIndex,
-          action: onSubmit,
-          triggerPropertyName: "onSubmit",
-          eventType: EventType.ON_SUBMIT,
-          row: {
-            ...this.props.filteredTableData[rowIndex],
-            [this.props.editableCell.column]: value,
-          },
-        });
-      }
+    this.pushTransientTableDataActionsUpdates({
+      [ORIGINAL_INDEX_KEY]: this.getRowOriginalIndex(rowIndex),
+      [alias]: value,
+    });
 
-      commitBatchMetaUpdates();
-      this.clearEditableCell();
+    if (onSubmit && this.props.editableCell?.column) {
+      //since onSubmit is truthy this makes action truthy as well, so we can push this event
+      this.pushOnColumnEvent({
+        rowIndex: rowIndex,
+        action: onSubmit,
+        triggerPropertyName: "onSubmit",
+        eventType: EventType.ON_SUBMIT,
+        row: {
+          ...this.props.filteredTableData[rowIndex],
+          [this.props.editableCell.column]: value,
+        },
+      });
     }
+
+    commitBatchMetaUpdates();
+    this.clearEditableCell();
   };
   pushClearEditableCellsUpdates = () => {
     const { pushBatchMetaUpdates } = this.props;