@adaptabletools/adaptable 21.0.0-canary.1 → 21.0.0-canary.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adaptabletools/adaptable",
-  "version": "21.0.0-canary.1",
+  "version": "21.0.0-canary.3",
   "description": "Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements",
   "keywords": [
     "web-components",

package/src/AdaptableInterfaces/IAdaptable.d.ts

@@ -10,7 +10,7 @@ import { SelectedCellInfo } from '../AdaptableState/Selection/SelectedCellInfo';
 import { AdaptableTheme } from '../AdaptableState/ThemeState';
 import { IAdaptableStore } from '../Redux/Store/Interface/IAdaptableStore';
 import { IModuleCollection } from '../Strategy/Interface/IModule';
-import { AdaptableMenuItem, AdaptableOptions, AdaptablePlugin, AdaptableState, ChartDefinition, InFilterValue, SelectedRowInfo } from '../types';
+import { AdaptableMenuItem, AdaptableOptions, AdaptablePlugin, AdaptableState, ChartDefinition, InFilterValueResult, SelectedRowInfo } from '../types';
 import { ICalculatedColumnExpressionService } from '../Utilities/Services/Interface/ICalculatedColumnExpressionService';
 import { IDataService } from '../Utilities/Services/Interface/IDataService';
 import { AnnotationsService } from '../Utilities/Services/AnnotationsService';
@@ -183,7 +183,8 @@ export interface IAdaptable {
     getDistinctFilterValuesForColumn(options: {
         column: AdaptableColumn;
         currentSearchValue: string;
-    }): Promise<InFilterValue[]>;
+        previousResult: InFilterValueResult | undefined;
+    }): Promise<InFilterValueResult>;
     getGridCellFromRowNode(rowNode: IRowNode, columnId: string): GridCell | undefined;
     getRawValueFromRowNode(rowNode: IRowNode, columnId: string): any;
     getDisplayValueFromRowNode(rowNode: IRowNode, columnId: string): string | undefined;

package/src/AdaptableOptions/DefaultAdaptableOptions.js

@@ -150,7 +150,6 @@ const DefaultAdaptableOptions = {
         columnFilterOptions: {
             indicateFilteredColumns: true,
             autoApplyColumnFilter: true,
-            cacheInFilterValues: true,
             defaultNumericColumnFilter: 'Equals',
             defaultTextColumnFilter: 'Contains',
             defaultDateColumnFilter: 'On',

package/src/AdaptableOptions/EditOptions.d.ts

@@ -58,7 +58,12 @@ export interface EditColumnValueInfo {
     value: any;
     label?: string;
 }
-export interface CustomEditColumnValueInfo extends EditColumnValueInfo {
+/**
+ * Information about items in the custom Edit Controls
+ */
+export interface CustomEditColumnValueInfo {
+    value: any;
+    label?: string;
 }
 /**
  * Used for Server Validation ie. after an edit in AG Grid which must be checked on Server

package/src/AdaptableOptions/FilterOptions.d.ts

@@ -30,7 +30,7 @@ export interface FilterOptions<TData = any> {
      * @param context
      * @returns
      */
-    customInFilterValues?: (context: CustomInFilterValuesContext<TData>) => Promise<InFilterValueInfo[]> | InFilterValueInfo[];
+    customInFilterValues?: (context: CustomInFilterValuesContext<TData>) => Promise<InFilterValueResult> | InFilterValueResult;
     /**
      * When to re-filter grid after data changes: 'Always', 'Never' or 'Throttle' (with a delay value)
      *
@@ -86,13 +86,6 @@ export interface ColumnFilterOptions<TData = any> {
      * @noCodeItem
      */
     autoApplyColumnFilter?: boolean | ((context: AdaptableColumnContext) => boolean);
-    /**
-     * Whether to cache the values in the IN Filter component
-     * @defaultValue true
-     * @gridInfoItem
-     * @noCodeItem
-     */
-    cacheInFilterValues?: boolean | ((context: AdaptableColumnContext) => boolean);
     /**
      * Default filter type for numeric Columns
      *
@@ -212,6 +205,20 @@ export interface InFilterValue<ValueType = any> {
      */
     tooltip?: boolean | string;
 }
+/**
+ * Result when providing custom values for the IN Column Filter
+ */
+export type InFilterValueResult = {
+    /**
+     * List of Items to display in the IN Column Filter
+     */
+    values: InFilterValue[];
+    /**
+     * When TRUE, displays the provided values without any filtering.
+     * When FALSE, the values are filtered based on the current search text.
+     */
+    skipDefaultSearch?: boolean;
+};
 /**
  * Information about items in the IN Column Filter
  */
@@ -253,6 +260,11 @@ export interface CustomInFilterValuesContext<TData = any> extends AdaptableColum
      * Search text in the IN Filter component - used when filtering on server
      */
     currentSearchValue: string;
+    /**
+     * Memoized result from previous invocation. Helps avoid expensive recomputations,
+     * especially for async operations (e.g. server-side filtering).
+     */
+    previousFilterResult?: InFilterValueResult;
 }
 /**
  * List of Editors that can be used when creating the Grid Filter

package/src/AdaptableOptions/LayoutOptions.d.ts

@@ -122,5 +122,8 @@ export interface DefaultLayoutProperties {
  * Context for `LayoutOptions.defaultLayoutProperties` function
  */
 export interface DefaultLayoutPropertiesContext extends BaseContext {
+    /**
+     * Type of Layout ('table' | 'pivot')
+     */
     layoutType: 'table' | 'pivot';
 }

package/src/AdaptableState/Common/AdaptableColumn.d.ts

@@ -1,11 +1,11 @@
 import { AdaptableObject } from './AdaptableObject';
-import { BaseCellDataType, ColDef } from 'ag-grid-enterprise';
+import { ColDef } from 'ag-grid-enterprise';
 import { UniqueGridCell } from '../Selection/GridCell';
 import { ColumnFilter } from './ColumnFilter';
 /**
  * Defines data type of a Column; can be an AG Grid BaseCellDataType or an AdapTable array-related one
  */
-export type AdaptableColumnDataType = BaseCellDataType | 'textArray' | 'numberArray' | 'tupleArray' | 'objectArray' | 'unknown';
+export type AdaptableColumnDataType = 'text' | 'number' | 'boolean' | 'date' | 'object' | 'textArray' | 'numberArray' | 'tupleArray' | 'objectArray' | 'unknown';
 /**
  * Column Types recognised by AdapTable; to be set in GridOptions
  */

package/src/Api/ColumnFilterApi.d.ts

@@ -1,4 +1,4 @@
-import { AdaptableColumn, ColumnFilter, ColumnFilterPredicate, InFilterValue, InFilterValueInfo } from '../types';
+import { AdaptableColumn, ColumnFilter, ColumnFilterPredicate, InFilterValueInfo, InFilterValueResult } from '../types';
 import { AdaptablePredicateDef, ColumnFilterDef } from '../AdaptableState/Common/AdaptablePredicate';
 /**
  * Provides run-time access to Filter section of Adaptable State.
@@ -138,16 +138,16 @@ export interface ColumnFilterApi {
      * @param columnId - the ID of the Column for which to refresh filter values.
      * @return a Promise that resolves to the list of filter values, each represented as an object with `value` and `label` properties.
      */
-    refreshFilterValues(columnId: string): Promise<InFilterValue[]>;
+    refreshFilterValues(columnId: string): Promise<InFilterValueResult>;
     /**
      * Refreshes (reloads) the filter values for ALL Columns (for `IN` Filter).
      *
      * @returns A Promise that resolves to a map where:
      *          - keys are column IDs (string)
-     *          - values are arrays of filter values for the corresponding column
-     *            Each filter value contains a `value` and display `label` property
+     *          - values are objects with a `values` property, which is an array of values for the corresponding column
+     *            Each item in the array contains a `value` and display `label` property
      */
-    refreshAllFilterValues(): Promise<Record<string, InFilterValue[]>>;
+    refreshAllFilterValues(): Promise<Record<string, InFilterValueResult>>;
     /**
      * Reset(clear cache) the filter values for a given Column (for `IN` Filter).
      * @param columnId - the ID of the Column for which to reset filter values.

package/src/Api/Implementation/ColumnApiImpl.js

@@ -414,7 +414,7 @@ export class ColumnApiImpl extends ApiBase {
         return this.getUIAvailableColumns().filter((c) => c.dataType === 'textArray');
     }
     getDateColumns() {
-        return this.getUIAvailableColumns().filter((c) => c.dataType === 'date' || c.dataType === 'dateString');
+        return this.getUIAvailableColumns().filter((c) => c.dataType === 'date');
     }
     getBooleanColumns() {
         return this.getUIAvailableColumns().filter((c) => c.dataType === 'boolean');

package/src/Api/Implementation/ColumnFilterApiImpl.d.ts

@@ -1,7 +1,7 @@
 import { ApiBase } from './ApiBase';
 import { AdaptablePredicateDef, ColumnFilterDef } from '../../AdaptableState/Common/AdaptablePredicate';
 import { AdaptableColumn } from '../../AdaptableState/Common/AdaptableColumn';
-import { ColumnFilter, ColumnFilterPredicate, InFilterValueInfo, InFilterValue } from '../../types';
+import { ColumnFilter, ColumnFilterPredicate, InFilterValueInfo, InFilterValueResult } from '../../types';
 import { IAdaptable } from '../../AdaptableInterfaces/IAdaptable';
 import { ColumnFilterInternalApi } from '../Internal/ColumnFilterInternalApi';
 import { ColumnFilterApi } from '../ColumnFilterApi';
@@ -44,8 +44,8 @@ export declare class ColumnFilterApiImpl extends ApiBase implements ColumnFilter
     suspendAllColumnFilters(): void;
     unSuspendAllColumnFilters(): void;
     addBlanksToInFilterValues(columnDistinctValues: InFilterValueInfo[]): InFilterValueInfo[];
-    refreshFilterValues(columnId: string): Promise<InFilterValue[]>;
-    refreshAllFilterValues(): Promise<Record<string, InFilterValue[]>>;
+    refreshFilterValues(columnId: string): Promise<InFilterValueResult>;
+    refreshAllFilterValues(): Promise<Record<string, InFilterValueResult>>;
     resetFilterValues(columnId: string): void;
     resetAllFilterValues(): void;
 }

package/src/Api/Implementation/ColumnFilterApiImpl.js

@@ -214,19 +214,19 @@ export class ColumnFilterApiImpl extends ApiBase {
     async refreshAllFilterValues() {
         const allFilterHandlers = this.internalApi.getAllAdaptableFilterHandlers();
         const handlerPromises = allFilterHandlers.map(async (handler) => {
-            let values = [];
+            let result = { values: [] };
             if (typeof handler.refreshFilterDisplayValues === 'function') {
-                values = await handler.refreshFilterDisplayValues();
+                result = await handler.refreshFilterDisplayValues();
             }
             else {
                 this.logWarn(`No refresh function for filter handler: ${handler.colId}`);
-                values = [];
+                result = { values: [] };
             }
-            return { columnId: handler.colId, values };
+            return { columnId: handler.colId, result };
         });
         return Promise.all(handlerPromises).then((results) => {
-            return results.reduce((acc, { columnId, values }) => {
-                acc[columnId] = values;
+            return results.reduce((acc, { columnId, result }) => {
+                acc[columnId] = result;
                 return acc;
             }, {});
         });

package/src/Api/Internal/ColumnFilterInternalApi.d.ts

@@ -5,7 +5,7 @@ import { AdaptablePredicateDef } from '../../AdaptableState/Common/AdaptablePred
 import { ColumnFilter } from '../../AdaptableState/Common/ColumnFilter';
 import { GridCell } from '../../AdaptableState/Selection/GridCell';
 import { LayoutColumnFilterAction } from '../../Redux/ActionsReducers/LayoutRedux';
-import { InFilterValue } from '../../types';
+import { InFilterValueResult } from '../../types';
 import { ApiBase } from '../Implementation/ApiBase';
 import { AdaptableFilterHandler } from '../../agGrid/AdaptableFilterHandler';
 export declare class ColumnFilterInternalApi extends ApiBase {
@@ -53,8 +53,8 @@ export declare class ColumnFilterInternalApi extends ApiBase {
     getColumnFilterValues(options: {
         columnId: string;
         currentSearchValue: string;
-    }): Promise<InFilterValue[]>;
+    }): Promise<InFilterValueResult>;
     shouldAutoApplyColumnFilter(columnId: string): boolean;
-    shouldCacheColumnFilterValues(columnId: string): boolean;
+    getAdaptableFilterHandler(columnId: string): AdaptableFilterHandler | undefined;
     getAllAdaptableFilterHandlers(): AdaptableFilterHandler[];
 }

package/src/Api/Internal/ColumnFilterInternalApi.js

@@ -240,20 +240,28 @@ export class ColumnFilterInternalApi extends ApiBase {
      * Only if the FilterHandler is not available we fallback to the GridApi method
      */
     async getColumnFilterValues(options) {
-        const shouldUseCachedValues = this.shouldCacheColumnFilterValues(options.columnId);
-        if (!shouldUseCachedValues) {
-            return this.getGridApi().internalApi.getDistinctFilterDisplayValuesForColumn(options);
-        }
+        const filterOptions = this.getOptionsApi().getFilterOptions();
+        const newOptions = {
+            columnId: options.columnId,
+            get currentSearchValue() {
+                // we need this in order to keep it lazy
+                return options.currentSearchValue;
+            },
+            previousResult: undefined,
+        };
         const columnFilterHandler = this.getAgGridApi().getColumnFilterHandler(options.columnId);
         if (!columnFilterHandler) {
             this.logWarn(`No ColumnFilterHandler found for columnId: ${options.columnId}!`);
-            return this.getGridApi().internalApi.getDistinctFilterDisplayValuesForColumn(options);
+            return this.getGridApi().internalApi.getDistinctFilterDisplayValuesForColumn(newOptions);
+        }
+        if (typeof columnFilterHandler.getFromCacheOrFetchFilterDisplayValues !== 'function') {
+            this.logWarn(`ColumnFilterHandler for columnId: ${options.columnId} does not have getFromCacheOrFetchFilterDisplayValues method!`);
+            return this.getGridApi().internalApi.getDistinctFilterDisplayValuesForColumn(newOptions);
         }
-        if (typeof columnFilterHandler.getFilterDisplayValues !== 'function') {
-            this.logWarn(`ColumnFilterHandler for columnId: ${options.columnId} does not have getFilterDisplayValues method!`);
-            return this.getGridApi().internalApi.getDistinctFilterDisplayValuesForColumn(options);
+        if (filterOptions.customInFilterValues) {
+            return columnFilterHandler.fetchFilterDisplayValues(newOptions);
         }
-        return columnFilterHandler.getFilterDisplayValues(options.currentSearchValue);
+        return columnFilterHandler.getFromCacheOrFetchFilterDisplayValues(newOptions);
     }
     shouldAutoApplyColumnFilter(columnId) {
         const autoApplyColumnFilterOpt = this.getOptionsApi().getFilterOptions().columnFilterOptions?.autoApplyColumnFilter;
@@ -271,21 +279,8 @@ export class ColumnFilterInternalApi extends ApiBase {
         // fallback, should never happen
         return true;
     }
-    shouldCacheColumnFilterValues(columnId) {
-        const cacheColumnFilterValuesOpt = this.getOptionsApi().getFilterOptions().columnFilterOptions?.cacheInFilterValues;
-        if (typeof cacheColumnFilterValuesOpt === 'boolean') {
-            return cacheColumnFilterValuesOpt;
-        }
-        if (typeof cacheColumnFilterValuesOpt === 'function') {
-            const column = this.getColumnApi().getColumnWithColumnId(columnId);
-            const context = {
-                column,
-                ...this.getAdaptableApi().internalApi.buildBaseContext(),
-            };
-            return cacheColumnFilterValuesOpt(context);
-        }
-        // fallback, should never happen
-        return true;
+    getAdaptableFilterHandler(columnId) {
+        return this.getAgGridApi().getColumnFilterHandler(columnId);
     }
     getAllAdaptableFilterHandlers() {
         const allFilterableColumns = this.getColumnApi().getFilterableColumns();

package/src/Api/Internal/ColumnInternalApi.js

@@ -296,6 +296,6 @@ export class ColumnInternalApi extends ApiBase {
     }
     getColumnDateTypes() {
         // this is required because Adaptable uses 'date' type for all AG Grid date types: 'date', 'dateString'
-        return ['date', 'dateString'];
+        return ['date'];
     }
 }

package/src/Api/Internal/GridInternalApi.d.ts

@@ -5,7 +5,7 @@ import { SpecialColumnSettings } from '../../AdaptableState/Common/SpecialColumn
 import { GridCell } from '../../AdaptableState/Selection/GridCell';
 import { SelectedCellInfo } from '../../AdaptableState/Selection/SelectedCellInfo';
 import { SelectedRowInfo } from '../../AdaptableState/Selection/SelectedRowInfo';
-import { InFilterValue } from '../../types';
+import { InFilterValueResult } from '../../types';
 import { ApiBase } from '../Implementation/ApiBase';
 import { EditColumnValueInfo } from '../../AdaptableOptions/EditOptions';
 export declare class GridInternalApi extends ApiBase {
@@ -29,7 +29,8 @@ export declare class GridInternalApi extends ApiBase {
     getDistinctFilterDisplayValuesForColumn(options: {
         columnId: string;
         currentSearchValue: string;
-    }): Promise<InFilterValue[]>;
+        previousResult: InFilterValueResult | undefined;
+    }): Promise<InFilterValueResult>;
     getDistinctValuesForColumn(columnId: string): Promise<GridCell[]> | undefined;
     getDistinctEditDisplayValuesForColumn(options: {
         columnId: string;

package/src/Api/Internal/GridInternalApi.js

@@ -35,15 +35,16 @@ export class GridInternalApi extends ApiBase {
     async getDistinctFilterDisplayValuesForColumn(options) {
         const abColumn = this.getColumnApi().getColumnWithColumnId(options.columnId);
         if (abColumn == undefined) {
-            return [];
+            return { values: [] };
         }
         const inFilterValues = await this._adaptable.getDistinctFilterValuesForColumn({
             column: abColumn,
             get currentSearchValue() {
                 return options.currentSearchValue;
             },
+            previousResult: options.previousResult,
         });
-        return inFilterValues || [];
+        return inFilterValues || { values: [] };
     }
     async getDistinctValuesForColumn(columnId) {
         const abColumn = this.getColumnApi().getColumnWithColumnId(columnId);

package/src/Api/Internal/PredicateInternalApi.js

@@ -106,7 +106,6 @@ export class PredicateInternalApi extends ApiBase {
                 predicateId = 'Equals';
                 break;
             case 'date':
-            case 'dateString':
                 predicateId = 'On';
                 break;
             case 'text':

package/src/Redux/Store/AdaptableStore.js

@@ -892,8 +892,6 @@ const adaptableMiddleware = (adaptable) => (function(middlewareAPI) {
                     const newLayout = (newLayoutState.Layouts || []).find((l) => l.Name == newLayoutState.CurrentLayout) ||
                         newLayoutState.Layouts[0] ||
                         ERROR_LAYOUT;
-                    const changedColumnSorts = adaptable.api.layoutApi.internalApi.getChangedColumnSorts(oldLayout.ColumnSorts, newLayout.ColumnSorts);
-                    changedColumnSorts.forEach((columnId) => adaptable.api.filterApi.columnFilterApi.resetFilterValues(columnId));
                     let refreshColumnFilters = false;
                     if (adaptable.api.filterApi.columnFilterApi.internalApi.areColumnFiltersDifferent(oldLayout.ColumnFilters, newLayout.ColumnFilters)) {
                         refreshColumnFilters = true;

package/src/Strategy/ColumnFilterModule.js

@@ -30,11 +30,18 @@ export class ColumnFilterModule extends AdaptableModuleBase {
         // we reset the filter cache on sort change, because we might have columns
         // with "In" filters, with custom values, which use `context.orderedValues`
         // customInFilterValues: (context: CustomInFilterValuesContext<Car>) => {
-        //   return context.orderedValues;
+        //   return {values: context.orderedValues};
         // }
         // and that order will most likely change when sorting happens
         // so we need to reset the cached filter values when sorting changes
         this.api.eventApi.on('GridSorted', () => {
+            const filterOptions = this.api.optionsApi.getFilterOptions();
+            if (!filterOptions.customInFilterValues) {
+                // no-one is using context.sortedValues/context.orderedValues
+                // or a custom property from a value, like value.count or value.visible
+                // so no need to reset the filter display values
+                return;
+            }
             this.api.filterApi.columnFilterApi.resetAllFilterValues();
         });
     }

package/src/Utilities/adaptableQlUtils.js

@@ -8,7 +8,7 @@ export const mapColumnDataTypeToExpressionFunctionType = (dataType) => {
     if (dataType === 'text') {
         return 'text';
     }
-    if (dataType === 'date' || dataType === 'dateString') {
+    if (dataType === 'date') {
         return 'date';
     }
     if (dataType === 'numberArray') {

package/src/View/Components/ColumnFilter/components/FloatingFilterValues.d.ts

@@ -25,6 +25,7 @@ export declare function useDistinctFilterColumnValues(options: {
             label: string;
         }[];
         dataLoadIsComplete: boolean;
+        skipDefaultSearch: boolean;
         searchValueUsedInFilterValue: boolean;
     };
     setQuickFilterValues: React.Dispatch<React.SetStateAction<{
@@ -33,9 +34,12 @@ export declare function useDistinctFilterColumnValues(options: {
             label: string;
         }[];
         dataLoadIsComplete: boolean;
+        skipDefaultSearch: boolean;
         searchValueUsedInFilterValue: boolean;
     }>>;
-    triggerValuesLoad: () => void;
+    triggerValuesLoad: (options?: {
+        usePrevious: boolean;
+    }) => void;
 };
 /**
  * This component was ported and modified to not know about colum  filter and predicates.

package/src/View/Components/ColumnFilter/components/FloatingFilterValues.js

@@ -20,10 +20,18 @@ export function useDistinctFilterColumnValues(options) {
     const { columnId, searchValueRef } = options;
     const { api } = useAdaptable();
     const [valuesLoadTrigger, setValuesLoadTrigger] = React.useState(0);
-    const triggerValuesLoad = React.useCallback(() => {
+    const usePreviousValuesProbablyBecauseOfAGGridUnnecessaryFilterRemountRef = React.useRef(false);
+    const triggerValuesLoad = React.useCallback((options) => {
+        usePreviousValuesProbablyBecauseOfAGGridUnnecessaryFilterRemountRef.current =
+            !!options?.usePrevious;
         setValuesLoadTrigger((prev) => prev + 1);
     }, []);
-    const [quickFilterValues, setQuickFilterValues] = React.useState({ values: [], dataLoadIsComplete: false, searchValueUsedInFilterValue: false });
+    const [quickFilterValues, setQuickFilterValues] = React.useState({
+        values: [],
+        dataLoadIsComplete: false,
+        skipDefaultSearch: false,
+        searchValueUsedInFilterValue: false,
+    });
     const [isDistinctColumnValuesLoading, setIsDistinctColumnValuesLoading] = React.useState(false);
     useEffect(() => {
         if (valuesLoadTrigger === 0) {
@@ -33,21 +41,35 @@ export function useDistinctFilterColumnValues(options) {
         let ignore = false;
         setIsDistinctColumnValuesLoading(true);
         let searchValueUsedInFilterValue = false;
-        api.filterApi.columnFilterApi.internalApi
-            .getColumnFilterValues({
-            columnId,
-            get currentSearchValue() {
-                searchValueUsedInFilterValue = true;
-                return searchValueRef ? searchValueRef.current : '';
-            },
-        })
-            .then((distinctFilterDisplayValues) => {
+        const columnFilterinternalApi = api.filterApi.columnFilterApi.internalApi;
+        let promise = undefined;
+        if (usePreviousValuesProbablyBecauseOfAGGridUnnecessaryFilterRemountRef.current) {
+            const previousResult = columnFilterinternalApi
+                .getAdaptableFilterHandler(columnId)
+                ?.getLastCachedFilterDisplayValues();
+            if (previousResult) {
+                promise = Promise.resolve(previousResult);
+            }
+        }
+        usePreviousValuesProbablyBecauseOfAGGridUnnecessaryFilterRemountRef.current = false;
+        if (!promise) {
+            promise = columnFilterinternalApi.getColumnFilterValues({
+                columnId,
+                get currentSearchValue() {
+                    searchValueUsedInFilterValue = true;
+                    return searchValueRef ? searchValueRef.current : '';
+                },
+            });
+        }
+        promise.then((distinctFilterDisplayValues) => {
             if (ignore) {
                 return;
             }
+            const values = distinctFilterDisplayValues.values;
             setQuickFilterValues({
-                values: distinctFilterDisplayValues,
+                values,
                 dataLoadIsComplete: true,
+                skipDefaultSearch: !!distinctFilterDisplayValues.skipDefaultSearch,
                 searchValueUsedInFilterValue,
             });
             setIsDistinctColumnValuesLoading(false);
@@ -84,9 +106,15 @@ export const FloatingFilterValues = (props) => {
         if (!value || !Array.isArray(value) || value.length === 0) {
             return;
         }
+        // see 😅 usePreviousValuesProbablyBecauseOfAGGridUnnecessaryFilterRemountRef 😅
+        const usePrevious = !!api.filterApi.columnFilterApi.internalApi
+            .getAdaptableFilterHandler(props.columnId)
+            ?.getLastCachedFilterDisplayValues();
         // however, if the `value` prop is a non-empty array, we need to load the values
         // so we know which labels to show
-        triggerValuesLoad();
+        triggerValuesLoad({
+            usePrevious,
+        });
     }, []);
     const quickFilterValuesRef = React.useRef(quickFilterValues);
     quickFilterValuesRef.current = quickFilterValues;
@@ -116,16 +144,19 @@ export const FloatingFilterValues = (props) => {
     const onMenuOpen = triggerValuesLoad;
     const onInputChange = React.useCallback((value) => {
         searchValueRef.current = value;
-        if (quickFilterValues.searchValueUsedInFilterValue) {
+        const quickFilterValues = quickFilterValuesRef.current;
+        if (quickFilterValues.searchValueUsedInFilterValue || quickFilterValues.skipDefaultSearch) {
             triggerValuesLoad();
         }
-    }, [quickFilterValues.searchValueUsedInFilterValue]);
+    }, []);
+    const { skipDefaultSearch } = quickFilterValues;
     return (React.createElement(ColumnValuesSelect, { selectProps: props.inline
             ? {
                 ...props.selectProps,
                 'data-name': 'Select Values',
                 renderMultipleValues,
                 isClearable: false,
+                skipDefaultFiltering: skipDefaultSearch,
                 styles: {
                     dropdownIndicator: {
                         display: 'none',
@@ -154,5 +185,10 @@ export const FloatingFilterValues = (props) => {
                 onMenuOpen,
                 onInputChange,
             }
-            : { ...props.selectProps, onMenuOpen, onInputChange }, disabled: props.disabled, isLoading: isDistinctColumnValuesLoading, column: currentColumn, dataType: currentColumn.dataType, options: quickFilterValues.values, value: props.value, onChange: props.onChange }));
+            : {
+                ...props.selectProps,
+                skipDefaultFiltering: skipDefaultSearch,
+                onMenuOpen,
+                onInputChange,
+            }, disabled: props.disabled, isLoading: isDistinctColumnValuesLoading, column: currentColumn, dataType: currentColumn.dataType, options: quickFilterValues.values, value: props.value, onChange: props.onChange }));
 };

package/src/View/Components/ColumnFilter/utils.js

@@ -133,7 +133,6 @@ export const mapColumnFilterToQlPredicate = (columnFilter, abColumn, qlPredicate
                     : { operator: 'Contains', args: [] };
                 break;
             case 'date':
-            case 'dateString':
                 let defaultQlDatePredicate;
                 const defaultDateColumnFilter = columnFilterOptions.defaultDateColumnFilter;
                 if (defaultDateColumnFilter) {

package/src/View/Components/FilterForm/ListBoxFilterForm.js

@@ -9,7 +9,7 @@ export const ColumnValuesSelect = (props) => {
     const column = props.column;
     const selectedColumnValues = props.value || [];
     const value = [];
-    const options = props.options.filter((distinctValue, index) => {
+    const options = (Array.isArray(props.options) ? props.options : []).filter((distinctValue) => {
         let isActive = selectedColumnValues.indexOf(distinctValue.value) >= 0;
         // special case for date objects, need to check against string values
         if (!isActive && distinctValue.value && distinctValue.value instanceof Date) {

package/src/View/Components/PredicateEditor/PredicateEditor.js

@@ -45,13 +45,25 @@ export const PredicateEditor = (props) => {
     const adaptable = useAdaptable();
     const columnId = props.columnId;
     const column = adaptable.api.columnApi.getColumnWithColumnId(columnId);
+    const searchValueRef = React.useRef('');
     const { quickFilterValues, isDistinctColumnValuesLoading, triggerValuesLoad } = useDistinctFilterColumnValues({
         columnId,
+        searchValueRef,
     });
+    const quickFilterValuesRef = React.useRef(quickFilterValues);
+    quickFilterValuesRef.current = quickFilterValues;
     useEffect(triggerValuesLoad, []);
     const onMenuOpen = () => {
         triggerValuesLoad();
     };
+    const onInputChange = React.useCallback((value) => {
+        searchValueRef.current = value;
+        const quickFilterValues = quickFilterValuesRef.current;
+        if (quickFilterValues.searchValueUsedInFilterValue || quickFilterValues.skipDefaultSearch) {
+            triggerValuesLoad();
+        }
+    }, []);
+    const { skipDefaultSearch } = quickFilterValues;
     return (React.createElement(Box, { className: baseClassName },
         React.createElement(Flex, { justifyContent: "stretch", alignItems: "center" },
             icon && React.createElement(Tag, { mr: 2 }, icon),
@@ -70,5 +82,7 @@ export const PredicateEditor = (props) => {
         adaptable.api.predicateApi.internalApi.IsInorNotInPredicateDef(currentPredicateDef) && (React.createElement(Box, { mt: 2 },
             React.createElement(ColumnValuesSelect, { isLoading: isDistinctColumnValuesLoading, column: column, options: quickFilterValues.values, selectProps: {
                     onMenuOpen,
+                    onInputChange,
+                    skipDefaultFiltering: skipDefaultSearch,
                 }, dataType: column.dataType, value: props.predicate.Inputs, onChange: handlePredicateValuesChange })))));
 };

package/src/View/Components/Selectors/PermittedValuesSelector.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { SelectProps } from '../../../components/Select';
+import { InFilterValue } from '../../../AdaptableOptions/FilterOptions';
 export type ValueType = number | string | Date;
 interface PermittedValuesSelectorProps<Value extends ValueType, IsMulti extends boolean> {
     searchable?: false | 'inline' | 'menulist';
@@ -17,10 +18,7 @@ interface PermittedValuesSelectorProps<Value extends ValueType, IsMulti extends
     menuPortalTarget?: HTMLElement;
     loadValues?: (options: {
         currentSearchValue: string;
-    }) => Promise<{
-        value: any;
-        label: string;
-    }[]>;
+    }) => Promise<InFilterValue[]>;
 }
 export declare const PermittedValuesSelector: <Value extends ValueType, IsMulti extends boolean = false>(props: PermittedValuesSelectorProps<Value, IsMulti>) => React.JSX.Element;
 export {};