[WC-3344] Placement of filter dropdowns on small viewports (#2152)

Author: r0b1n

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

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+- We fixed an issue with filter selector dropdown not choosing the best placement on small viewports.
+
 ## [3.8.1] - 2026-02-19
 
 ### Changed

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

@@ -1,7 +1,7 @@
+import { ReactElement } from "react";
 import { withAttributeGuard } from "@mendix/widget-plugin-filtering/helpers/withAttributeGuard";
 import { withFilterAPI } from "@mendix/widget-plugin-filtering/helpers/withFilterAPI";
 import { withPreloader } from "@mendix/widget-plugin-platform/hoc/withPreloader";
-import { ReactElement } from "react";
 import { DatagridDateFilterContainerProps } from "../typings/DatagridDateFilterProps";
 import { DateFilterContainer } from "./components/DateFilterContainer";
 import { withLinkedDateStore } from "./hocs/withLinkedDateStore";

packages/pluggableWidgets/datagrid-date-filter-web/src/components/DateFilterContainer.tsx

@@ -1,11 +1,11 @@
-import { useDateSync } from "@mendix/widget-plugin-filtering/helpers/useDateSync";
-import { Date_InputFilterInterface } from "@mendix/widget-plugin-filtering/typings/InputFilterInterface";
 import { observer } from "mobx-react-lite";
 import { ReactElement } from "react";
+import { useDateSync } from "@mendix/widget-plugin-filtering/helpers/useDateSync";
+import { Date_InputFilterInterface } from "@mendix/widget-plugin-filtering/typings/InputFilterInterface";
+import { FilterComponent } from "./FilterComponent";
 import { DatagridDateFilterContainerProps } from "../../typings/DatagridDateFilterProps";
 import { useActionEvents } from "../helpers/useActionEvents";
 import { useSetup } from "../helpers/useSetup";
-import { FilterComponent } from "./FilterComponent";
 
 interface ContainerProps extends DatagridDateFilterContainerProps {
     filterStore: Date_InputFilterInterface;

packages/pluggableWidgets/datagrid-date-filter-web/src/components/FilterComponent.tsx

@@ -1,8 +1,8 @@
-import { FilterSelector } from "@mendix/widget-plugin-filtering/controls";
 import classNames from "classnames";
 import { CSSProperties, ReactElement } from "react";
-import { FilterTypeEnum } from "../helpers/base-types";
+import { FilterSelector } from "@mendix/widget-plugin-filtering/controls";
 import { DatePicker, DatePickerProps } from "./DatePicker";
+import { FilterTypeEnum } from "../helpers/base-types";
 
 export interface FilterComponentProps extends DatePickerProps {
     id?: string;

packages/pluggableWidgets/datagrid-date-filter-web/src/helpers/DatePickerController.ts

@@ -1,9 +1,9 @@
+import { isDate } from "date-fns/isDate";
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
 import { BaseSyntheticEvent, ClassAttributes, createRef, KeyboardEventHandler, MouseEventHandler } from "react";
-import { isDate } from "date-fns/isDate";
 import ReactDatePicker, { ReactDatePickerProps } from "react-datepicker";
-import { Date_InputFilterInterface, FilterFn } from "@mendix/widget-plugin-filtering/typings/InputFilterInterface";
 import { SetFilterValueArgs } from "@mendix/widget-plugin-external-events/typings";
+import { Date_InputFilterInterface, FilterFn } from "@mendix/widget-plugin-filtering/typings/InputFilterInterface";
 
 interface DatePickerBackendProps extends ReactDatePickerProps, ClassAttributes<ReactDatePicker> {}
 

packages/pluggableWidgets/datagrid-date-filter-web/src/helpers/useActionEvents.ts

@@ -1,5 +1,5 @@
-import { useOnResetValueEvent, useOnSetValueEvent } from "@mendix/widget-plugin-external-events/hooks";
 import { useState } from "react";
+import { useOnResetValueEvent, useOnSetValueEvent } from "@mendix/widget-plugin-external-events/hooks";
 import { DatePickerController } from "./DatePickerController";
 
 type HookParams = [Parameters<typeof useOnResetValueEvent>[0], Parameters<typeof useOnSetValueEvent>[0]];

packages/pluggableWidgets/datagrid-date-filter-web/src/helpers/useSetup.ts

@@ -1,10 +1,10 @@
+import { Locale } from "date-fns";
 import { useEffect, useMemo, useState } from "react";
 import { Date_InputFilterInterface } from "@mendix/widget-plugin-filtering/typings/InputFilterInterface";
-import { DatePickerController } from "../helpers/DatePickerController";
 import { generateUUID } from "@mendix/widget-plugin-platform/framework/generate-uuid";
-import { Locale } from "date-fns";
-import { getLocale, pickerDateFormat, setupLocales } from "../utils/date-utils";
 import { FilterTypeEnum } from "./base-types";
+import { DatePickerController } from "../helpers/DatePickerController";
+import { getLocale, pickerDateFormat, setupLocales } from "../utils/date-utils";
 
 interface SetupProps {
     filterStore: Date_InputFilterInterface;

packages/pluggableWidgets/datagrid-date-filter-web/src/hocs/withLinkedDateStore.tsx

@@ -1,8 +1,8 @@
+import { AttributeMetaData } from "mendix";
+import { FC } from "react";
 import { FilterAPI } from "@mendix/widget-plugin-filtering/context";
 import { DateStoreProvider } from "@mendix/widget-plugin-filtering/custom-filter-api/DateStoreProvider";
 import { useSetup } from "@mendix/widget-plugin-mobx-kit/react/useSetup";
-import { AttributeMetaData } from "mendix";
-import { FC } from "react";
 import { DateFilterProps } from "../components/typings";
 
 interface RequiredProps {

packages/pluggableWidgets/datagrid-date-filter-web/src/hocs/withParentProvidedDateStore.tsx

@@ -1,9 +1,9 @@
+import { ReactElement, useRef } from "react";
 import { Alert } from "@mendix/widget-plugin-component-kit/Alert";
 import { useFilterAPI } from "@mendix/widget-plugin-filtering/context";
 import { APIError, EMISSINGSTORE, EStoreTypeMisMatch } from "@mendix/widget-plugin-filtering/errors";
 import { error, Result, value } from "@mendix/widget-plugin-filtering/result-meta";
 import { isDateFilter } from "@mendix/widget-plugin-filtering/stores/input/store-utils";
-import { ReactElement, useRef } from "react";
 import { DateFilterProps } from "../components/typings";
 
 export function withParentProvidedDateStore<P>(

packages/pluggableWidgets/datagrid-date-filter-web/src/hocs/withPreviewAdapter.tsx

@@ -1,6 +1,6 @@
 import { ReactElement, useMemo } from "react";
-import { FilterComponent } from "../components/FilterComponent";
 import { DatagridDateFilterPreviewProps } from "../../typings/DatagridDateFilterProps";
+import { FilterComponent } from "../components/FilterComponent";
 
 type PreviewAdapter = (props: DatagridDateFilterPreviewProps) => ReactElement;