rez-table-listing-mui 1.3.20 → 1.3.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rez-table-listing-mui",
-  "version": "1.3.20",
+  "version": "1.3.21",
   "type": "module",
   "description": "A rez table listing component built on TanStack Table",
   "main": "dist/index.js",

package/src/listing/components/filter/components/forms/components/Dropdown.tsx

@@ -16,22 +16,6 @@ interface FormDropdownProps {
   onValueChange?: () => void;
 }
 
-// Allowed date-based operators
-const DATE_ALLOWED_OPERATORS = [
-  "equal",
-  "before",
-  "after",
-  "between",
-  "is",
-  "today",
-  "is_before",
-  "is_after",
-  "is_on_or_before",
-  "is_on_or_after",
-  "empty",
-  "not_empty",
-];
-
 const FormDropdown = ({
   filter,
   control,
@@ -70,21 +54,10 @@ const FormDropdown = ({
               const newOperator = e.target.value;
               const oldOperator = field.value;
 
+              // Update RHF field
               field.onChange(e);
 
-              // Reset value if operator switches date → non-date or non-date → date
-              if (filter.filter_attribute_data_type === "date") {
-                const wasDateOp = DATE_ALLOWED_OPERATORS.includes(oldOperator);
-                const isDateOpNow =
-                  DATE_ALLOWED_OPERATORS.includes(newOperator);
-
-                if (wasDateOp !== isDateOpNow) {
-                  setValue(`${filter?.filter_attribute_name}.value`, "", {
-                    shouldDirty: true,
-                  });
-                }
-              }
-
+              // Handle date/year specific operator-based value reset logic
               if (
                 (filter?.filter_attribute_data_type === "date" ||
                   filter?.filter_attribute_data_type === "year") &&
@@ -112,7 +85,10 @@ const FormDropdown = ({
                 }
               }
 
-              onValueChange?.();
+              // ⭐ FIX: Ensure parent form re-evaluates AFTER RHF updates the operator
+              setTimeout(() => {
+                onValueChange?.();
+              }, 0);
             }}
           >
             {dropdownList?.map((item, idx) => (
@@ -129,6 +105,137 @@ const FormDropdown = ({
 
 export default FormDropdown;
 
+// import { FormControl, MenuItem, Select, SxProps, Theme } from "@mui/material";
+// import { Controller, UseFormSetValue } from "react-hook-form";
+// import { FilterStateProps } from "../../../../../types/filter";
+// import moment from "moment";
+
+// interface FormDropdownProps {
+//   filter: FilterStateProps;
+//   control: any;
+//   setValue: UseFormSetValue<any>;
+//   dropdownList: {
+//     label?: string;
+//     value?: string;
+//   }[];
+//   isLoading?: boolean;
+//   sx?: SxProps<Theme>;
+//   onValueChange?: () => void;
+// }
+
+// // Allowed date-based operators
+// const DATE_ALLOWED_OPERATORS = [
+//   "equal",
+//   "before",
+//   "after",
+//   "between",
+//   "is",
+//   "today",
+//   "is_before",
+//   "is_after",
+//   "is_on_or_before",
+//   "is_on_or_after",
+//   "empty",
+//   "not_empty",
+// ];
+
+// const FormDropdown = ({
+//   filter,
+//   control,
+//   setValue,
+//   dropdownList,
+//   isLoading = false,
+//   sx,
+//   onValueChange,
+// }: FormDropdownProps) => {
+//   return (
+//     <Controller
+//       name={`${filter?.filter_attribute_name}.operator`}
+//       control={control}
+//       defaultValue={filter?.filter_operator || dropdownList?.[0]?.value || ""}
+//       render={({ field }) => (
+//         <FormControl sx={sx} size="small">
+//           <Select
+//             {...field}
+//             variant="standard"
+//             sx={{
+//               fontSize: "0.875rem",
+//               minWidth: 50,
+//               border: "none",
+//               boxShadow: "none",
+//               "& .MuiSelect-icon": {
+//                 top: "45%",
+//                 transform: "translateY(-50%)",
+//                 "& .MuiOutlinedInput-input": {
+//                   padding: "12px 20px",
+//                 },
+//               },
+//             }}
+//             disabled={isLoading}
+//             disableUnderline
+//             onChange={(e) => {
+//               const newOperator = e.target.value;
+//               const oldOperator = field.value;
+
+//               field.onChange(e);
+
+//               // Reset value if operator switches date → non-date or non-date → date
+//               if (filter.filter_attribute_data_type === "date") {
+//                 const wasDateOp = DATE_ALLOWED_OPERATORS.includes(oldOperator);
+//                 const isDateOpNow =
+//                   DATE_ALLOWED_OPERATORS.includes(newOperator);
+
+//                 if (wasDateOp !== isDateOpNow) {
+//                   setValue(`${filter?.filter_attribute_name}.value`, "", {
+//                     shouldDirty: true,
+//                   });
+//                 }
+//               }
+
+//               if (
+//                 (filter?.filter_attribute_data_type === "date" ||
+//                   filter?.filter_attribute_data_type === "year") &&
+//                 newOperator !== oldOperator
+//               ) {
+//                 if (newOperator === "today") {
+//                   setValue(
+//                     `${filter?.filter_attribute_name}.value`,
+//                     moment().format("YYYY-MM-DD"),
+//                     {
+//                       shouldDirty: true,
+//                     }
+//                   );
+//                 } else if (newOperator === "between") {
+//                   setValue(`${filter?.filter_attribute_name}.value`, ["", ""], {
+//                     shouldDirty: true,
+//                   });
+//                 } else if (
+//                   oldOperator === "between" ||
+//                   oldOperator === "today"
+//                 ) {
+//                   setValue(`${filter?.filter_attribute_name}.value`, "", {
+//                     shouldDirty: true,
+//                   });
+//                 }
+//               }
+
+//               onValueChange?.();
+//             }}
+//           >
+//             {dropdownList?.map((item, idx) => (
+//               <MenuItem key={idx} value={item.value}>
+//                 {item.label}
+//               </MenuItem>
+//             ))}
+//           </Select>
+//         </FormControl>
+//       )}
+//     />
+//   );
+// };
+
+// export default FormDropdown;
+
 // !! DON'T DELETE THIS OLD CODE !! //
 
 // import { FormControl, MenuItem, Select, SxProps, Theme } from "@mui/material";