bugfix: added verification for the column type being passed, before, it was checking if the value could be converted to number even if it was a number surrounded by quotes, this would not work because the developer could intentionally pass a string to represent a number so the conversion would fail and not filter properly, now it only converts if it’s necessary for MRT to find the corresponding original values if they were not transformed in accessorFn

Author: felipehimself

src/package/checkbox/autocomplete-checkbox.tsx

@@ -14,7 +14,11 @@ import { Clear as ClearIcon } from "@mui/icons-material";
 
 import { checkedIcon, icon } from "./constants";
 import { filterFalsy, sortOptions } from "../utils";
-import { TAutocompleteCheckboxProps, TRenderOptions } from "../types";
+import {
+  TAutocompleteCheckboxProps,
+  TColumnType,
+  TRenderOptions,
+} from "../types";
 import { CUSTOM_EVENT_CLEAN_AUTOCOMPLETE } from "../constants";
 
 const AutocompleteCheckboxInner = <T extends Record<string, any>>(
@@ -39,12 +43,15 @@ const AutocompleteCheckboxInner = <T extends Record<string, any>>(
 
   const [filters, setFilters] = useState<string[]>([]);
   const [autocompleteOpen, setAutocompleteOpen] = useState(false);
+  const [columnType, setColumnType] = useState<TColumnType>(null);
 
   const autocompleteOptions = useMemo(() => {
     const rowsObject = header?.getContext()?.table.getFilteredRowModel();
 
     const noFalsyValues = filterFalsy(options);
 
+    setColumnType(typeof noFalsyValues[0]);
+
     const uniqueOptions = [
       ...new Set(noFalsyValues.map((option) => String(option))),
     ];
@@ -112,6 +119,7 @@ const AutocompleteCheckboxInner = <T extends Record<string, any>>(
       if (customEvent.detail.message === CUSTOM_EVENT_CLEAN_AUTOCOMPLETE) {
         setFilters([]);
         setAutocompleteOpen(false);
+        setColumnType(null);
       }
     };
 
@@ -149,9 +157,13 @@ const AutocompleteCheckboxInner = <T extends Record<string, any>>(
   const handleApplyFilter = <T extends Record<string, any>>(
     header: MRT_Header<T>
   ) => {
-    const handlingNumberValue = filters.map((x) =>
-      Number.isFinite(+x) ? Number(x) : x
-    );
+    const handlingNumberValue = filters.map((x) => {
+      const isNumber = columnType === "number";
+
+      if (isNumber) return Number(x);
+
+      return x;
+    });
 
     const newFilterValueState =
       handlingNumberValue.length > 0 ? handlingNumberValue : undefined;

src/package/types/column-type.ts

@@ -0,0 +1 @@
+export type TColumnType = string | number | boolean | null;

src/package/types/index.ts

@@ -1,3 +1,4 @@
 export * from "./autocomplete-checkbox-props";
 export * from "./render-options";
 export * from "./sort-exclusive";
+export * from "./column-type";