🐛 MultipleFilter 一度選択した条件を編集する際、フィルタリングの更新を感知していない (#1655)

.changeset/curly-swans-shake.md

@@ -0,0 +1,5 @@
+---
+"ingred-ui": patch
+---
+
+MultipleFilter Condition not sensed correctly when editing the condition.

src/components/MultipleFilter/MultipleFilter.stories.tsx

@@ -3,6 +3,7 @@ import { StoryObj } from "@storybook/react";
 import MultipleFilter, { MultipleFilterProps } from "./MultipleFilter";
 import Spacer from "../Spacer";
 import { FilterPackType, ReferredFilterType } from "./types";
+import DataTable from "../DataTable";
 
 export default {
   title: "Components/Utils/MultipleFilter",
@@ -181,3 +182,131 @@ export const SkipExample: StoryObj<MultipleFilterProps> = {
     );
   },
 };
+
+const filterPacksWithDataTableExample: FilterPackType[] = [
+  {
+    categoryName: "Product",
+    filters: [
+      {
+        filterName: "",
+        control: {
+          type: "text",
+        },
+      },
+    ],
+  },
+  {
+    categoryName: "Category",
+    filters: [
+      {
+        filterName: "",
+        control: {
+          type: "text",
+        },
+      },
+    ],
+  },
+  {
+    categoryName: "InStock",
+    filters: [
+      {
+        filterName: "",
+        control: {
+          type: "select",
+          options: ["Yes", "No"],
+        },
+      },
+    ],
+  },
+];
+
+export const WithDataTableExample: StoryObj<MultipleFilterProps> = {
+  render: (args) => {
+    const data = [
+      { id: 1, product: "Laptop", category: "Electronics", inStock: "Yes" },
+      { id: 2, product: "Smartphone", category: "Electronics", inStock: "Yes" },
+      { id: 3, product: "Headphones", category: "Audio", inStock: "No" },
+      { id: 4, product: "Running Shoes", category: "Sports", inStock: "Yes" },
+      { id: 5, product: "Coffee Maker", category: "Kitchen", inStock: "Yes" },
+      { id: 6, product: "Desk Chair", category: "Furniture", inStock: "No" },
+      { id: 7, product: "Tablet", category: "Electronics", inStock: "Yes" },
+      { id: 8, product: "Backpack", category: "Accessories", inStock: "Yes" },
+      { id: 9, product: "Smartwatch", category: "Electronics", inStock: "No" },
+      { id: 10, product: "Blender", category: "Kitchen", inStock: "Yes" },
+      { id: 11, product: "Yoga Mat", category: "Sports", inStock: "Yes" },
+      { id: 12, product: "Bookshelf", category: "Furniture", inStock: "Yes" },
+      {
+        id: 13,
+        product: "Wireless Mouse",
+        category: "Electronics",
+        inStock: "Yes",
+      },
+      {
+        id: 14,
+        product: "Portable Charger",
+        category: "Accessories",
+        inStock: "No",
+      },
+      { id: 15, product: "Air Purifier", category: "Home", inStock: "Yes" },
+    ];
+
+    type DataItem = (typeof data)[number];
+
+    const [filteredData, setFilteredData] = React.useState<DataItem[]>(data);
+
+    const handleChange: MultipleFilterProps["onChange"] = (referredFilters) => {
+      const newFilteredData = data.filter((item) => {
+        return referredFilters.every((filter) => {
+          const condition = (
+            (filter.filterCondition as string) || ""
+          ).toLowerCase();
+
+          switch (filter.categoryName) {
+            case "InStock":
+              return item.inStock.toLowerCase() === condition;
+            case "Product":
+              return item.product.toLowerCase().includes(condition);
+            case "Category":
+              return item.category.toLowerCase().includes(condition);
+            default:
+              return true;
+          }
+        });
+      });
+
+      setFilteredData(newFilteredData);
+    };
+
+    return (
+      <>
+        <MultipleFilter
+          {...args}
+          filterPacks={filterPacksWithDataTableExample}
+          inputErrorText="Input error text can be customized"
+          formPlaceholder="Placeholder can be customized"
+          onChange={handleChange}
+        />
+        <Spacer mb={2} />
+        <DataTable
+          data={filteredData}
+          columns={[
+            {
+              name: "Product",
+              selector: (a) => a.product,
+            },
+            {
+              name: "Category",
+              selector: (a) => a.category,
+            },
+            {
+              name: "In Stock",
+              selector: (a) => a.inStock,
+            },
+          ]}
+          dataKey="id"
+        />
+        <Spacer mb={12} />
+      </>
+    );
+  },
+};

src/components/MultipleFilter/MultipleFilter.tsx

@@ -161,11 +161,12 @@ const MultipleFilter = React.forwardRef<HTMLDivElement, MultipleFilterProps>(
         editedFilter.filterCondition;
 
       if (isEdited) {
-        currentReferredFilters[editIndex] = editedFilter;
-        setCurrentReferredFilters(currentReferredFilters.slice());
-        if (onChange !== undefined) {
-          onChange(currentReferredFilters);
-        }
+        setCurrentReferredFilters((prevState) => {
+          const nextState = [...prevState];
+          nextState[editIndex] = editedFilter;
+          onChange?.(nextState);
+          return nextState;
+        });
       }
 
       setIsClick(false);