[WC-2648] - Filter fixes: Dropdown, Text

packages/pluggableWidgets/datagrid-date-filter-web/src/components/__tests__/DatagridDateFilter.spec.tsx

@@ -13,6 +13,11 @@ import DatagridDateFilter from "../../DatagridDateFilter";
 import { DatagridDateFilterContainerProps } from "../../../typings/DatagridDateFilterProps";
 import { MXGlobalObject, MXSessionConfig } from "../../../typings/global";
 
+export interface StaticInfo {
+    name: string;
+    filtersChannelName: string;
+}
+
 function createMXObjectMock(
     code: string,
     langTag: string,
@@ -46,6 +51,11 @@ const commonProps: DatagridDateFilterContainerProps = {
     advanced: false
 };
 
+const headerFilterStoreInfo: StaticInfo = {
+    name: commonProps.name,
+    filtersChannelName: ""
+};
+
 const mxObject = createMXObjectMock("en_US", "en-US");
 
 describe("Date Filter", () => {
@@ -61,7 +71,7 @@ describe("Date Filter", () => {
                         { filter: new ListAttributeValueBuilder().withType("DateTime").withFilterable(true).build() }
                     ]
                 };
-                const headerFilterStore = new HeaderFiltersStore(props, null);
+                const headerFilterStore = new HeaderFiltersStore(props, headerFilterStoreInfo, null);
                 (window as any)["com.mendix.widgets.web.filterable.filterContext.v2"] = createContext<FilterAPIv2>(
                     headerFilterStore.context
                 );
@@ -149,7 +159,7 @@ describe("Date Filter", () => {
                         }
                     ]
                 };
-                const headerFilterStore = new HeaderFiltersStore(props, null);
+                const headerFilterStore = new HeaderFiltersStore(props, headerFilterStoreInfo, null);
                 (window as any)["com.mendix.widgets.web.filterable.filterContext.v2"] = createContext<FilterAPIv2>(
                     headerFilterStore.context
                 );
@@ -176,7 +186,7 @@ describe("Date Filter", () => {
                         { filter: new ListAttributeValueBuilder().withType("Decimal").withFilterable(true).build() }
                     ]
                 };
-                const headerFilterStore = new HeaderFiltersStore(props, null);
+                const headerFilterStore = new HeaderFiltersStore(props, headerFilterStoreInfo, null);
                 (window as any)["com.mendix.widgets.web.filterable.filterContext.v2"] = createContext<FilterAPIv2>(
                     headerFilterStore.context
                 );
@@ -216,7 +226,7 @@ describe("Date Filter", () => {
                         }
                     ]
                 };
-                const headerFilterStore = new HeaderFiltersStore(props, null);
+                const headerFilterStore = new HeaderFiltersStore(props, headerFilterStoreInfo, null);
                 (window as any)["com.mendix.widgets.web.filterable.filterContext.v2"] = createContext<FilterAPIv2>(
                     headerFilterStore.context
                 );
@@ -259,7 +269,7 @@ describe("Date Filter", () => {
                     { filter: new ListAttributeValueBuilder().withType("DateTime").withFilterable(true).build() }
                 ]
             };
-            const headerFilterStore = new HeaderFiltersStore(props, null);
+            const headerFilterStore = new HeaderFiltersStore(props, headerFilterStoreInfo, null);
             (window as any)["com.mendix.widgets.web.filterable.filterContext.v2"] = createContext<FilterAPIv2>(
                 headerFilterStore.context
             );
@@ -288,7 +298,7 @@ describe("Date Filter", () => {
                     { filter: new ListAttributeValueBuilder().withType("DateTime").withFilterable(true).build() }
                 ]
             };
-            const headerFilterStore = new HeaderFiltersStore(props, null);
+            const headerFilterStore = new HeaderFiltersStore(props, headerFilterStoreInfo, null);
             (window as any)["com.mendix.widgets.web.filterable.filterContext.v2"] = createContext<FilterAPIv2>(
                 headerFilterStore.context
             );

packages/pluggableWidgets/datagrid-dropdown-filter-web/CHANGELOG.md

@@ -10,6 +10,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 -   We fixed an issue where onChange events were not being triggered on dropdown filter.
 
+-   We fixed an issue with dropdown filters in some cases not resetting.
+
 ## [2.9.1] - 2024-09-23
 
 ### Changed

packages/pluggableWidgets/datagrid-dropdown-filter-web/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@mendix/datagrid-dropdown-filter-web",
     "widgetName": "DatagridDropdownFilter",
-    "version": "2.9.1",
+    "version": "2.9.2",
     "description": "",
     "copyright": "© Mendix Technology BV 2023. All rights reserved.",
     "private": true,

packages/pluggableWidgets/datagrid-dropdown-filter-web/src/DatagridDropdownFilter.tsx

@@ -12,7 +12,9 @@ function Container(props: DatagridDropdownFilterContainerProps & Select_FilterAP
         tabIndex: props.tabIndex,
         styles: props.style,
         onChange: props.onChange,
-        valueAttribute: props.valueAttribute
+        valueAttribute: props.valueAttribute,
+        parentChannelName: props.parentChannelName,
+        name: props.name
     };
 
     if (props.filterStore.type === "refselect") {

packages/pluggableWidgets/datagrid-dropdown-filter-web/src/components/RefFilterContainer.tsx

@@ -1,4 +1,5 @@
 import { RefFilterController } from "@mendix/widget-plugin-filtering/controllers/RefFilterController";
+import { useOnResetValueEvent } from "@mendix/widget-plugin-external-events/hooks";
 import { Select } from "@mendix/widget-plugin-filtering/controls";
 import { OptionListFilterInterface } from "@mendix/widget-plugin-filtering/typings/OptionListFilterInterface";
 import { useOnScrollBottom } from "@mendix/widget-plugin-hooks/useOnScrollBottom";
@@ -7,6 +8,8 @@ import { ActionValue } from "mendix";
 import { observer } from "mobx-react-lite";
 import { createElement, CSSProperties, useEffect, useRef, useState } from "react";
 export interface RefFilterContainerProps {
+    name: string;
+    parentChannelName?: string;
     filterStore: OptionListFilterInterface;
     multiselect: boolean;
     emptyCaption?: string;
@@ -31,6 +34,11 @@ function Container(props: RefFilterContainerProps): React.ReactElement {
 
     useEffect(() => controller.setup(), [controller]);
     useEffect(() => controller.updateProps({ onChange: props.onChange }), [controller, props.onChange]);
+    useOnResetValueEvent({
+        widgetName: props.name,
+        parentChannelName: props.parentChannelName,
+        listener: controller.handleResetValue
+    });
     const handleContentScroll = useOnScrollBottom(controller.handleScrollEnd, { triggerZoneHeight: 100 });
 
     return (

packages/pluggableWidgets/datagrid-dropdown-filter-web/src/components/StaticFilterContainer.tsx

@@ -1,4 +1,5 @@
 import { StaticFilterController } from "@mendix/widget-plugin-filtering/controllers/StaticFilterController";
+import { useOnResetValueEvent } from "@mendix/widget-plugin-external-events/hooks";
 import { Select } from "@mendix/widget-plugin-filtering/controls";
 import { OptionListFilterInterface } from "@mendix/widget-plugin-filtering/typings/OptionListFilterInterface";
 import { generateUUID } from "@mendix/widget-plugin-platform/framework/generate-uuid";
@@ -9,6 +10,8 @@ import { FilterOptionsType } from "../../typings/DatagridDropdownFilterProps";
 import { withCustomOptionsGuard } from "../hocs/withCustomOptionsGuard";
 
 export interface StaticFilterContainerProps {
+    parentChannelName: string | undefined;
+    name: string;
     filterStore: OptionListFilterInterface;
     filterOptions: FilterOptionsType[];
     multiselect: boolean;
@@ -29,6 +32,12 @@ function Container(props: StaticFilterContainerProps): React.ReactElement {
     useEffect(() => controller.setup(), [controller]);
     useEffect(() => controller.updateProps(props));
 
+    useOnResetValueEvent({
+        widgetName: props.name,
+        parentChannelName: props.parentChannelName,
+        listener: controller.handleResetValue
+    });
+
     return (
         <Select
             options={controller.options}

packages/pluggableWidgets/datagrid-dropdown-filter-web/src/components/__tests__/DataGridDropdownFilter.spec.tsx

@@ -6,6 +6,11 @@ import { createContext, createElement } from "react";
 import DatagridDropdownFilter from "../../DatagridDropdownFilter";
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 
+export interface StaticInfo {
+    name: string;
+    filtersChannelName: string;
+}
+
 const commonProps = {
     class: "filter-custom-class",
     tabIndex: 0,
@@ -14,6 +19,11 @@ const commonProps = {
     groupKey: "dropdown-filter"
 };
 
+const headerFilterStoreInfo: StaticInfo = {
+    name: commonProps.name,
+    filtersChannelName: ""
+};
+
 describe("Dropdown Filter", () => {
     describe("with single instance", () => {
         afterEach(() => {
@@ -37,7 +47,7 @@ describe("Dropdown Filter", () => {
                         }
                     ]
                 };
-                const headerFilterStore = new HeaderFiltersStore(props, null);
+                const headerFilterStore = new HeaderFiltersStore(props, headerFilterStoreInfo, null);
                 (window as any)["com.mendix.widgets.web.filterable.filterContext.v2"] = createContext<FilterAPIv2>(
                     headerFilterStore.context
                 );
@@ -207,7 +217,7 @@ describe("Dropdown Filter", () => {
                         }
                     ]
                 };
-                const headerFilterStore = new HeaderFiltersStore(props, null);
+                const headerFilterStore = new HeaderFiltersStore(props, headerFilterStoreInfo, null);
                 (window as any)["com.mendix.widgets.web.filterable.filterContext.v2"] = createContext<FilterAPIv2>(
                     headerFilterStore.context
                 );
@@ -246,7 +256,7 @@ describe("Dropdown Filter", () => {
                         }
                     ]
                 };
-                const headerFilterStore = new HeaderFiltersStore(props, null);
+                const headerFilterStore = new HeaderFiltersStore(props, headerFilterStoreInfo, null);
                 (window as any)["com.mendix.widgets.web.filterable.filterContext.v2"] = createContext<FilterAPIv2>(
                     headerFilterStore.context
                 );
@@ -287,7 +297,7 @@ describe("Dropdown Filter", () => {
                         }
                     ]
                 };
-                const headerFilterStore = new HeaderFiltersStore(props, null);
+                const headerFilterStore = new HeaderFiltersStore(props, headerFilterStoreInfo, null);
                 (window as any)["com.mendix.widgets.web.filterable.filterContext.v2"] = createContext<FilterAPIv2>(
                     headerFilterStore.context
                 );
@@ -337,7 +347,7 @@ describe("Dropdown Filter", () => {
                         }
                     ]
                 };
-                const headerFilterStore = new HeaderFiltersStore(props, null);
+                const headerFilterStore = new HeaderFiltersStore(props, headerFilterStoreInfo, null);
                 (window as any)["com.mendix.widgets.web.filterable.filterContext.v2"] = createContext<FilterAPIv2>(
                     headerFilterStore.context
                 );
@@ -382,7 +392,7 @@ describe("Dropdown Filter", () => {
                         }
                     ]
                 };
-                const headerFilterStore = new HeaderFiltersStore(props, null);
+                const headerFilterStore = new HeaderFiltersStore(props, headerFilterStoreInfo, null);
                 (window as any)["com.mendix.widgets.web.filterable.filterContext.v2"] = createContext<FilterAPIv2>(
                     headerFilterStore.context
                 );
@@ -429,7 +439,7 @@ describe("Dropdown Filter", () => {
                     }
                 ]
             };
-            const headerFilterStore = new HeaderFiltersStore(props, null);
+            const headerFilterStore = new HeaderFiltersStore(props, headerFilterStoreInfo, null);
             (window as any)["com.mendix.widgets.web.filterable.filterContext.v2"] = createContext<FilterAPIv2>(
                 headerFilterStore.context
             );

packages/pluggableWidgets/datagrid-dropdown-filter-web/src/hocs/withSelectFilterAPI.tsx

@@ -13,6 +13,8 @@ export function withSelectFilterAPI<P extends object>(
             return <Alert bootstrapStyle="danger">{api.error.message}</Alert>;
         }
 
-        return <Component {...props} filterStore={api.value.filterStore} />;
+        return (
+            <Component {...props} filterStore={api.value.filterStore} parentChannelName={api.value.parentChannelName} />
+        );
     };
 }

packages/pluggableWidgets/datagrid-dropdown-filter-web/src/package.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="DatagridDropdownFilter" version="2.9.1" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="DatagridDropdownFilter" version="2.9.2" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="DatagridDropdownFilter.xml" />
         </widgetFiles>

packages/pluggableWidgets/datagrid-dropdown-filter-web/typings/DatagridDropdownFilterProps.d.ts

@@ -41,6 +41,7 @@ export interface DatagridDropdownFilterPreviewProps {
     style: string;
     styleObject?: CSSProperties;
     readOnly: boolean;
+    renderMode?: "design" | "xray" | "structure";
     auto: boolean;
     advanced: boolean;
     defaultValue: string;

packages/pluggableWidgets/datagrid-number-filter-web/src/components/__tests__/DatagridNumberFilter.spec.tsx

@@ -15,6 +15,11 @@ import DatagridNumberFilter from "../../DatagridNumberFilter";
 import { Big } from "big.js";
 import { DatagridNumberFilterContainerProps } from "../../../typings/DatagridNumberFilterProps";
 
+export interface StaticInfo {
+    name: string;
+    filtersChannelName: string;
+}
+
 const commonProps: DatagridNumberFilterContainerProps = {
     class: "filter-custom-class",
     tabIndex: 0,
@@ -25,6 +30,11 @@ const commonProps: DatagridNumberFilterContainerProps = {
     delay: 1000
 };
 
+const headerFilterStoreInfo: StaticInfo = {
+    name: commonProps.name,
+    filtersChannelName: ""
+};
+
 jest.useFakeTimers();
 
 describe("Number Filter", () => {
@@ -49,7 +59,7 @@ describe("Number Filter", () => {
                         }
                     ]
                 };
-                const headerFilterStore = new HeaderFiltersStore(props, null);
+                const headerFilterStore = new HeaderFiltersStore(props, headerFilterStoreInfo, null);
                 (window as any)["com.mendix.widgets.web.filterable.filterContext.v2"] = createContext<FilterAPIv2>(
                     headerFilterStore.context
                 );
@@ -131,7 +141,7 @@ describe("Number Filter", () => {
                         }
                     ]
                 };
-                const headerFilterStore = new HeaderFiltersStore(props, null);
+                const headerFilterStore = new HeaderFiltersStore(props, headerFilterStoreInfo, null);
                 (window as any)["com.mendix.widgets.web.filterable.filterContext.v2"] = createContext<FilterAPIv2>(
                     headerFilterStore.context
                 );
@@ -155,7 +165,7 @@ describe("Number Filter", () => {
                         { filter: new ListAttributeValueBuilder().withType("Boolean").withFilterable(true).build() }
                     ]
                 };
-                const headerFilterStore = new HeaderFiltersStore(props, null);
+                const headerFilterStore = new HeaderFiltersStore(props, headerFilterStoreInfo, null);
                 (window as any)["com.mendix.widgets.web.filterable.filterContext.v2"] = createContext<FilterAPIv2>(
                     headerFilterStore.context
                 );
@@ -192,7 +202,7 @@ describe("Number Filter", () => {
                         }
                     ]
                 };
-                const headerFilterStore = new HeaderFiltersStore(props, null);
+                const headerFilterStore = new HeaderFiltersStore(props, headerFilterStoreInfo, null);
                 (window as any)["com.mendix.widgets.web.filterable.filterContext.v2"] = createContext<FilterAPIv2>(
                     headerFilterStore.context
                 );
@@ -238,7 +248,7 @@ describe("Number Filter", () => {
                     }
                 ]
             };
-            const headerFilterStore = new HeaderFiltersStore(props, null);
+            const headerFilterStore = new HeaderFiltersStore(props, headerFilterStoreInfo, null);
             (window as any)["com.mendix.widgets.web.filterable.filterContext.v2"] = createContext<FilterAPIv2>(
                 headerFilterStore.context
             );