fix: (backport) Matrix filter (#6867)

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/QuestionFilterComboBox.tsx

@@ -4,7 +4,7 @@ import clsx from "clsx";
 import { ChevronDown, ChevronUp, X } from "lucide-react";
 import { useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { TSurveyQuestionTypeEnum } from "@formbricks/types/surveys/types";
+import { TI18nString, TSurveyQuestionTypeEnum } from "@formbricks/types/surveys/types";
 import { OptionsType } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/QuestionsComboBox";
 import { getLocalizedValue } from "@/lib/i18n/utils";
 import { useClickOutside } from "@/lib/utils/hooks/useClickOutside";
@@ -26,8 +26,8 @@ import {
 import { Input } from "@/modules/ui/components/input";
 
 type QuestionFilterComboBoxProps = {
-  filterOptions: string[] | undefined;
-  filterComboBoxOptions: string[] | undefined;
+  filterOptions: (string | TI18nString)[] | undefined;
+  filterComboBoxOptions: (string | TI18nString)[] | undefined;
   filterValue: string | undefined;
   filterComboBoxValue: string | string[] | undefined;
   onChangeFilterValue: (o: string) => void;
@@ -74,7 +74,7 @@ export const QuestionFilterComboBox = ({
     if (!isMultiple) return filterComboBoxOptions;
 
     return filterComboBoxOptions?.filter((o) => {
-      const optionValue = typeof o === "object" ? getLocalizedValue(o, defaultLanguageCode) : o;
+      const optionValue = typeof o === "object" && o !== null ? getLocalizedValue(o, defaultLanguageCode) : o;
       return !filterComboBoxValue?.includes(optionValue);
     });
   }, [isMultiple, filterComboBoxOptions, filterComboBoxValue, defaultLanguageCode]);
@@ -91,14 +91,15 @@ export const QuestionFilterComboBox = ({
   const filteredOptions = useMemo(
     () =>
       options?.filter((o) => {
-        const optionValue = typeof o === "object" ? getLocalizedValue(o, defaultLanguageCode) : o;
+        const optionValue =
+          typeof o === "object" && o !== null ? getLocalizedValue(o, defaultLanguageCode) : o;
         return optionValue.toLowerCase().includes(searchQuery.toLowerCase());
       }),
     [options, searchQuery, defaultLanguageCode]
   );
 
-  const handleCommandItemSelect = (o: string) => {
-    const value = typeof o === "object" ? getLocalizedValue(o, defaultLanguageCode) : o;
+  const handleCommandItemSelect = (o: string | TI18nString) => {
+    const value = typeof o === "object" && o !== null ? getLocalizedValue(o, defaultLanguageCode) : o;
 
     if (isMultiple) {
       const newValue = Array.isArray(filterComboBoxValue) ? [...filterComboBoxValue, value] : [value];
@@ -200,14 +201,18 @@ export const QuestionFilterComboBox = ({
             )}
           </DropdownMenuTrigger>
           <DropdownMenuContent className="bg-white">
-            {filterOptions?.map((o, index) => (
-              <DropdownMenuItem
-                key={`${o}-${index}`}
-                className="cursor-pointer"
-                onClick={() => onChangeFilterValue(o)}>
-                {o}
-              </DropdownMenuItem>
-            ))}
+            {filterOptions?.map((o, index) => {
+              const optionValue =
+                typeof o === "object" && o !== null ? getLocalizedValue(o, defaultLanguageCode) : o;
+              return (
+                <DropdownMenuItem
+                  key={`${optionValue}-${index}`}
+                  className="cursor-pointer"
+                  onClick={() => onChangeFilterValue(optionValue)}>
+                  {optionValue}
+                </DropdownMenuItem>
+              );
+            })}
           </DropdownMenuContent>
         </DropdownMenu>
       )}
@@ -269,7 +274,8 @@ export const QuestionFilterComboBox = ({
                 <CommandEmpty>{t("common.no_result_found")}</CommandEmpty>
                 <CommandGroup>
                   {filteredOptions?.map((o) => {
-                    const optionValue = typeof o === "object" ? getLocalizedValue(o, defaultLanguageCode) : o;
+                    const optionValue =
+                      typeof o === "object" && o !== null ? getLocalizedValue(o, defaultLanguageCode) : o;
                     return (
                       <CommandItem
                         key={optionValue}

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/ResponseFilter.tsx

@@ -4,7 +4,7 @@ import { useAutoAnimate } from "@formkit/auto-animate/react";
 import { ChevronDown, ChevronUp, Plus, TrashIcon } from "lucide-react";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { TSurvey, TSurveyQuestionTypeEnum } from "@formbricks/types/surveys/types";
+import { TI18nString, TSurvey, TSurveyQuestionTypeEnum } from "@formbricks/types/surveys/types";
 import {
   SelectedFilterValue,
   TResponseStatus,
@@ -13,6 +13,7 @@ import {
 import { getSurveyFilterDataAction } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/actions";
 import { QuestionFilterComboBox } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/QuestionFilterComboBox";
 import { generateQuestionAndFilterOptions } from "@/app/lib/surveys/surveys";
+import { getLocalizedValue } from "@/lib/i18n/utils";
 import { Button } from "@/modules/ui/components/button";
 import { Popover, PopoverContent, PopoverTrigger } from "@/modules/ui/components/popover";
 import {
@@ -26,8 +27,8 @@ import { OptionsType, QuestionOption, QuestionsComboBox } from "./QuestionsCombo
 
 export type QuestionFilterOptions = {
   type: TSurveyQuestionTypeEnum | "Attributes" | "Tags" | "Languages" | "Quotas";
-  filterOptions: string[];
-  filterComboBoxOptions: string[];
+  filterOptions: (string | TI18nString)[];
+  filterComboBoxOptions: (string | TI18nString)[];
   id: string;
 };
 
@@ -69,6 +70,12 @@ export const ResponseFilter = ({ survey }: ResponseFilterProps) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [filterValue, setFilterValue] = useState<SelectedFilterValue>(selectedFilter);
 
+  const getDefaultFilterValue = (option?: QuestionFilterOptions): string | undefined => {
+    if (!option || option.filterOptions.length === 0) return undefined;
+    const firstOption = option.filterOptions[0];
+    return typeof firstOption === "object" ? getLocalizedValue(firstOption, "default") : firstOption;
+  };
+
   useEffect(() => {
     // Fetch the initial data for the filter and load it into the state
     const handleInitialData = async () => {
@@ -94,15 +101,18 @@ export const ResponseFilter = ({ survey }: ResponseFilterProps) => {
   }, [isOpen, setSelectedOptions, survey]);
 
   const handleOnChangeQuestionComboBoxValue = (value: QuestionOption, index: number) => {
+    const matchingFilterOption = selectedOptions.questionFilterOptions.find(
+      (q) => q.type === value.type || q.type === value.questionType
+    );
+    const defaultFilterValue = getDefaultFilterValue(matchingFilterOption);
+
     if (filterValue.filter[index].questionType) {
       // Create a new array and copy existing values from SelectedFilter
       filterValue.filter[index] = {
         questionType: value,
         filterType: {
           filterComboBoxValue: undefined,
-          filterValue: selectedOptions.questionFilterOptions.find(
-            (q) => q.type === value.type || q.type === value.questionType
-          )?.filterOptions[0],
+          filterValue: defaultFilterValue,
         },
       };
       setFilterValue({ filter: [...filterValue.filter], responseStatus: filterValue.responseStatus });
@@ -111,9 +121,7 @@ export const ResponseFilter = ({ survey }: ResponseFilterProps) => {
       filterValue.filter[index].questionType = value;
       filterValue.filter[index].filterType = {
         filterComboBoxValue: undefined,
-        filterValue: selectedOptions.questionFilterOptions.find(
-          (q) => q.type === value.type || q.type === value.questionType
-        )?.filterOptions[0],
+        filterValue: defaultFilterValue,
       };
       setFilterValue({ ...filterValue });
     }

apps/web/app/lib/surveys/surveys.test.ts

@@ -213,8 +213,8 @@ describe("surveys", () => {
             id: "q8",
             type: TSurveyQuestionTypeEnum.Matrix,
             headline: { default: "Matrix" },
-            rows: [{ id: "r1", label: "Row 1" }],
-            columns: [{ id: "c1", label: "Column 1" }],
+            rows: [{ id: "r1", label: { default: "Row 1" } }],
+            columns: [{ id: "c1", label: { default: "Column 1" } }],
           } as unknown as TSurveyQuestion,
         ],
         createdAt: new Date(),

apps/web/app/lib/surveys/surveys.ts

@@ -121,8 +121,8 @@ export const generateQuestionAndFilterOptions = (
       } else if (q.type === TSurveyQuestionTypeEnum.Matrix) {
         questionFilterOptions.push({
           type: q.type,
-          filterOptions: q.rows.flatMap((row) => Object.values(row)),
-          filterComboBoxOptions: q.columns.flatMap((column) => Object.values(column)),
+          filterOptions: q.rows.map((row) => getLocalizedValue(row.label, "default")),
+          filterComboBoxOptions: q.columns.map((column) => getLocalizedValue(column.label, "default")),
           id: q.id,
         });
       } else {