fix(web): incorrect default value for filter (#1267)

* fix: nullable filter

* fix: default value bug

---------

Co-authored-by: Kazuma Tsuchiya <>

web/src/components/molecules/Content/Table/DropdownRender/hooks.ts

@@ -1,4 +1,4 @@
-import { Dayjs } from "dayjs";
+import dayjs, { Dayjs } from "dayjs";
 import { useRef, useEffect, useCallback, useMemo, useState, Dispatch, SetStateAction } from "react";
 
 import { DatePickerProps } from "@reearth-cms/components/atoms/DatePicker";
@@ -38,15 +38,34 @@ export default (
   const t = useT();
   const [form] = Form.useForm();
 
+  const defaultValueGet = useCallback(() => {
+    switch (filter.type) {
+      case "Select":
+      case "Tag":
+      case "Person":
+      case "Bool":
+      case "Checkbox":
+        return defaultValue?.value?.toString();
+      case "Date":
+        return defaultValue && defaultValue.value !== "" ? dayjs(defaultValue.value) : undefined;
+      default:
+        return defaultValue?.value;
+    }
+  }, [defaultValue, filter.type]);
+
   useEffect(() => {
-    if (open && !defaultValue) {
-      form.resetFields();
-      setIsShowInputField(true);
-      if (!isFilter && filterOption.current) {
-        filterOption.current.value = "ASC";
+    if (open) {
+      if (defaultValue) {
+        form.setFieldsValue({ condition: defaultValue.operator, value: defaultValueGet() });
+      } else {
+        form.resetFields();
+        setIsShowInputField(true);
+        if (!isFilter && filterOption.current) {
+          filterOption.current.value = "ASC";
+        }
       }
     }
-  }, [open, form, defaultValue, isFilter]);
+  }, [open, form, defaultValue, isFilter, defaultValueGet]);
 
   const options = useMemo(() => {
     const result: {
@@ -236,31 +255,33 @@ export default (
   const filterValue = useRef<string>();
 
   useEffect(() => {
+    let isShow = true;
     if (defaultValue) {
+      const { operator, operatorType, value } = defaultValue;
       filterOption.current = {
-        value: defaultValue.operator,
-        operatorType: defaultValue.operatorType,
+        value: operator,
+        operatorType,
       };
-      filterValue.current = defaultValue.value;
+      filterValue.current = value;
+      if (
+        operatorType === "nullable" ||
+        operator === TimeOperator.OfThisWeek ||
+        operator === TimeOperator.OfThisMonth ||
+        operator === TimeOperator.OfThisYear
+      ) {
+        isShow = false;
+      }
     } else {
+      const { value, operatorType } = options[0];
       filterOption.current = {
-        value: options[0].value,
-        operatorType: options[0].operatorType,
+        value,
+        operatorType,
       };
+      if (operatorType === "nullable") {
+        isShow = false;
+      }
     }
-
-    if (defaultValue?.operatorType === "nullable") {
-      setIsShowInputField(false);
-    } else if (
-      defaultValue?.operator === TimeOperator.OfThisWeek ||
-      defaultValue?.operator === TimeOperator.OfThisMonth ||
-      defaultValue?.operator === TimeOperator.OfThisYear
-    ) {
-      setIsShowInputField(false);
-      defaultValue.value = "";
-    } else {
-      setIsShowInputField(true);
-    }
+    setIsShowInputField(isShow);
   }, [defaultValue, options]);
 
   const confirm = useCallback(() => {

web/src/components/molecules/Content/Table/DropdownRender/index.tsx

@@ -1,5 +1,4 @@
 import styled from "@emotion/styled";
-import dayjs from "dayjs";
 import { Dispatch, SetStateAction } from "react";
 
 import Button from "@reearth-cms/components/atoms/Button";
@@ -77,7 +76,7 @@ const DropdownRender: React.FC<Props> = ({
             style={{ width: 160 }}
             options={options}
             onSelect={onFilterSelect}
-            defaultValue={defaultValue?.operator ?? options[0].value}
+            defaultValue={options[0].value}
             getPopupContainer={trigger => trigger.parentNode}
           />
         </StyledFormItem>
@@ -91,7 +90,6 @@ const DropdownRender: React.FC<Props> = ({
               <Select
                 placeholder="Select the value"
                 onSelect={onValueSelect}
-                defaultValue={defaultValue?.value?.toString()}
                 getPopupContainer={trigger => trigger.parentNode}>
                 {valueOptions.map(option => (
                   <Option key={option.value} value={option.value} label={option.label}>
@@ -107,7 +105,6 @@ const DropdownRender: React.FC<Props> = ({
               <InputNumber
                 onChange={onNumberChange}
                 stringMode
-                defaultValue={defaultValue?.value}
                 style={{ width: "100%" }}
                 placeholder="Enter the value"
               />
@@ -117,16 +114,9 @@ const DropdownRender: React.FC<Props> = ({
                 style={{ width: "100%" }}
                 placeholder="Select the date"
                 showNow={false}
-                defaultValue={
-                  defaultValue && defaultValue.value !== "" ? dayjs(defaultValue.value) : undefined
-                }
               />
             ) : (
-              <Input
-                onChange={onInputChange}
-                defaultValue={defaultValue?.value}
-                placeholder="Enter the value"
-              />
+              <Input onChange={onInputChange} placeholder="Enter the value" />
             )}
           </StyledFormItem>
         )}

web/src/components/molecules/Content/Table/filterDropdown.tsx

@@ -28,7 +28,7 @@ type Props = {
 const FilterDropdown: React.FC<Props> = ({
   filter,
   index,
-  defaultValue: value,
+  defaultValue,
   filterRemove,
   isFilterOpen,
   currentView,
@@ -61,7 +61,7 @@ const FilterDropdown: React.FC<Props> = ({
           filter={filter}
           index={index}
           close={close}
-          defaultValue={value}
+          defaultValue={defaultValue}
           open={open}
           isFilter={true}
           currentView={currentView}