fix datepicker column in table

lowcoder-org · Aug 12, 2024 · 7e8dfe0 · 7e8dfe0
1 parent 0b5e457
commit 7e8dfe0
Showing 1 changed file with 17 additions and 3 deletions.
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnDateComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnDateComp.tsx
@@ -12,7 +12,7 @@ import { isNumber } from "lodash";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import { CalendarCompIconSmall, PrevIcon, SuperPrevIcon } from "lowcoder-design";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import styled from "styled-components";
 import { DateParser, DATE_FORMAT } from "util/dateTimeUtils";
 
@@ -149,20 +149,34 @@ type DateEditProps = {
 };
 
 export const DateEdit = (props: DateEditProps) => {
+  const pickerRef = useRef<any>();
   const [panelOpen, setPanelOpen] = useState(true);
   let value = dayjs(props.value, DateParser);
   if (!value.isValid()) {
     value = dayjs(0, DateParser);
   }
+
+  const [tempValue, setTempValue] = useState<dayjs.Dayjs | null>(value);
+
+  useEffect(() => {
+    const value = props.value ? dayjs(props.value, DateParser) : null;
+    setTempValue(value);
+  }, [props.value])
+
   return (
     <Wrapper
       onKeyDown={(e) => {
         if (e.key === "Enter" && !panelOpen) {
           props.onChangeEnd();
         }
       }}
+      onMouseDown={(e) => {
+        e.stopPropagation();
+        e.preventDefault();
+      }}
     >
       <DatePickerStyled
+        ref={pickerRef}
         $open={panelOpen}
         suffixIcon={<CalendarCompIconSmall />}
         prevIcon={<PrevIcon />}
@@ -172,7 +186,7 @@ export const DateEdit = (props: DateEditProps) => {
         allowClear={false}
         variant="borderless"
         autoFocus
-        defaultValue={value}
+        value={tempValue}
         showTime={props.showTime}
         showNow={true}
         defaultOpen={true}
@@ -184,7 +198,7 @@ export const DateEdit = (props: DateEditProps) => {
         }}
         onOpenChange={(open) => setPanelOpen(open)}
         onChange={(value, dateString) => props.onChange(dateString as string)}
-        onBlur={props.onChangeEnd}
+        onBlur={() => props.onChangeEnd()}
       />
     </Wrapper>
   );