@gooddata/sdk-ui-filters 11.41.0-alpha.2 → 11.41.0-alpha.4

package/esm/AttributeFilter/hooks/types.d.ts

@@ -375,6 +375,13 @@ export type SelectionTypeControllerCallbacks = {
      * @internal
      */
     resetForModeSwitch?: (newFilter: IAttributeFilter, newDisplayAsLabel?: ObjRef) => void;
+    /**
+     * Imperatively read the current working (not yet applied) elements selection as a filter.
+     * Used to snapshot the List selection before a mode switch so it can be restored later.
+     *
+     * @internal
+     */
+    getWorkingElementsFilter?: () => IAttributeFilter | undefined;
 };
 /**
  * AttributeFilter controller callbacks.
@@ -393,7 +400,7 @@ export type AttributeFilterController = AttributeFilterControllerData & Attribut
  *
  * @internal
  */
-export type ElementsFilterController = CommonFilterControllerData & ElementsFilterControllerData & CommonFilterControllerCallbacks & ElementsFilterControllerCallbacks & Pick<SelectionTypeControllerCallbacks, "setDisplayForm" | "resetForModeSwitch">;
+export type ElementsFilterController = CommonFilterControllerData & ElementsFilterControllerData & CommonFilterControllerCallbacks & ElementsFilterControllerCallbacks & Pick<SelectionTypeControllerCallbacks, "setDisplayForm" | "resetForModeSwitch" | "getWorkingElementsFilter">;
 /**
  * Text mode controller return type.
  * Only text-specific data and callbacks; root controller merges with common data and elements stubs.

package/esm/AttributeFilter/hooks/useAttributeFilterController.js

@@ -40,10 +40,28 @@ export const useAttributeFilterController = (props) => {
     const supportsSingleSelectDependentFilters = backend.capabilities.supportsSingleSelectDependentFilters;
     const { filter: resolvedFilter, setConnectedPlaceholderValue } = useResolveFilterInput(filterInput ?? workingFilter, connectToPlaceholder);
     const [selectionType, setSelectionType] = useState(() => getSelectionTypeFromFilter(resolvedFilter) ?? "elements");
+    // Only re-sync the selection type when the resolved (applied) filter's TYPE actually changes.
+    // Re-syncing on every resolvedFilter reference change would clobber an in-progress mode switch
+    // whenever the consumer re-renders with a new (but same-type) filter object — e.g. an app that
+    // recomputes the filter from its own state each render. That reverted the just-clicked mode and
+    // forced the user to switch List <-> Text twice.
+    const lastResolvedSelectionTypeRef = useRef(getSelectionTypeFromFilter(resolvedFilter) ?? "elements");
     useEffect(() => {
-        setSelectionType(getSelectionTypeFromFilter(resolvedFilter) ?? "elements");
+        const nextSelectionType = getSelectionTypeFromFilter(resolvedFilter) ?? "elements";
+        if (nextSelectionType !== lastResolvedSelectionTypeRef.current) {
+            lastResolvedSelectionTypeRef.current = nextSelectionType;
+            setSelectionType(nextSelectionType);
+        }
     }, [resolvedFilter]);
     const isTextSelectionType = selectionType === "text";
+    // Remembers the List (elements) selection captured when leaving List mode, so switching
+    // List -> Text -> List can restore it (keys and inverted flag) instead of resetting to "All".
+    // Seeded from the initial filter; updated with the live working selection on each switch to Text.
+    const lastElementsFilterRef = useRef(resolvedFilter &&
+        !isArbitraryAttributeFilter(resolvedFilter) &&
+        !isMatchAttributeFilter(resolvedFilter)
+        ? resolvedFilter
+        : undefined);
     const originalSelectionType = getSelectionTypeFromFilter(resolvedFilter);
     const selectionTypeChanged = originalSelectionType !== selectionType;
     // The display form from the filter definition itself. For elements filters this is
@@ -253,7 +271,7 @@ export const useAttributeFilterController = (props) => {
         elementsResetForModeSwitch,
         textResetForModeSwitch,
     ]);
-    const { currentDisplayFormRef: elementsCurrentDisplayFormRef } = elementsFilterController;
+    const { currentDisplayFormRef: elementsCurrentDisplayFormRef, getWorkingElementsFilter } = elementsFilterController;
     const onSelectionTypeChangeForControllers = useCallback((newMode) => {
         if (!resolvedDisplayFormRef) {
             return;
@@ -263,6 +281,12 @@ export const useAttributeFilterController = (props) => {
             return;
         }
         if (newMode === "text") {
+            // Leaving List: snapshot the current working element selection (including changes made
+            // since the last Apply) so switching back to List restores exactly what was on screen.
+            const workingElementsFilter = getWorkingElementsFilter?.();
+            if (workingElementsFilter) {
+                lastElementsFilterRef.current = workingElementsFilter;
+            }
             if (availableTextSelectionTypes.includes("arbitrary")) {
                 nextAvailableMode = "arbitrary";
             }
@@ -275,7 +299,12 @@ export const useAttributeFilterController = (props) => {
             ? (userSelectedDisplayForm ?? elementsCurrentDisplayFormRef)
             : elementsCurrentDisplayFormRef;
         const displayAsDisplayFormForNewFilter = newMode === "text" ? undefined : userSelectedDisplayForm;
-        const newFilter = createEmptyFilterForAvailableSelectionType(nextAvailableMode, displayFormForNewFilter, localId);
+        // Switching back to List: restore the previously applied element selection (keys + inverted
+        // flag) when we have it, so a List -> Text -> List round-trip preserves the user's selection
+        // instead of resetting to "All" (and, with stale committed elements, inverting it).
+        const restoredElementsFilter = newMode === "text" ? undefined : lastElementsFilterRef.current;
+        const newFilter = restoredElementsFilter ??
+            createEmptyFilterForAvailableSelectionType(nextAvailableMode, displayFormForNewFilter, localId);
         handleSelectionTypeChange(newFilter, displayAsDisplayFormForNewFilter, selectionType, newMode);
     }, [
         availableTextSelectionTypes,
@@ -285,6 +314,7 @@ export const useAttributeFilterController = (props) => {
         userSelectedDisplayForm,
         elementsCurrentDisplayFormRef,
         resolvedDisplayFormRef,
+        getWorkingElementsFilter,
     ]);
     const { textFilterOperator, textFilterValues, textFilterLiteral, textFilterCaseSensitive, onCommitTextFilter, isApplyDisabled: isTextApplyDisabled, } = textFilterController;
     const onApplyTextFilter = useCallback((applyRegardlessWithoutApplySetting = false, _applyToWorkingOnly = false) => {
@@ -364,11 +394,18 @@ export const useAttributeFilterController = (props) => {
         onResetText?.();
         onResetElements();
         setSelectionType(getSelectionTypeFromFilter(resolvedFilter) ?? "elements");
+        // The remembered List selection is only meaningful within a single open session (List -> Text
+        // -> List). Clear it on close so a snapshot captured before a Text filter was applied is not
+        // reused on the next open, which would push the stale elements selection and undo the applied
+        // text state. Leaving List re-captures the working selection, so this is safe.
+        lastElementsFilterRef.current = undefined;
     }, [onResetText, onResetElements, resolvedFilter]);
     // Wrap elements onReset to also revert selectionType on dropdown close without Apply.
     const onResetElementsMode = useCallback(() => {
         onResetElements();
         setSelectionType(getSelectionTypeFromFilter(resolvedFilter) ?? "elements");
+        // See onResetTextMode: the remembered List selection is session-scoped, clear it on close.
+        lastElementsFilterRef.current = undefined;
     }, [onResetElements, resolvedFilter]);
     if (isTextSelectionType) {
         return {

package/esm/AttributeFilter/hooks/useAttributeFilterHandlerMethods.d.ts

@@ -3,7 +3,7 @@ import { type IMultiSelectAttributeFilterHandler } from "../../AttributeFilterHa
  * @internal
  */
 export declare const useAttributeFilterHandlerMethods: (handler: IMultiSelectAttributeFilterHandler) => {
-    init: (correlation?: string | undefined, skipElementsLoading?: boolean | undefined) => void;
+    init: (correlation?: string | undefined, skipElementsLoading?: boolean | undefined, preserveWorkingSelection?: boolean | undefined) => void;
     onInitStart: import("../../index.js").CallbackRegistration<{
         correlation: string;
     }>;

package/esm/AttributeFilter/hooks/useElementsFilterController.js

@@ -3,7 +3,7 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { debounce, difference, differenceBy, isEmpty, isEqual } from "lodash-es";
 import { invariant } from "ts-invariant";
-import { areObjRefsEqual, filterAttributeElements, filterObjRef, isArbitraryAttributeFilter, isAttributeElementsByRef, isAttributeElementsByValue, isAttributeFilterWithSelection, isMatchAttributeFilter, isNegativeAttributeFilter, isPositiveAttributeFilter, objRefToString, } from "@gooddata/sdk-model";
+import { areObjRefsEqual, filterAttributeElements, filterLocalIdentifier, filterObjRef, isArbitraryAttributeFilter, isAttributeElementsByRef, isAttributeElementsByValue, isAttributeFilterWithSelection, isMatchAttributeFilter, isNegativeAttributeFilter, isPositiveAttributeFilter, newNegativeAttributeFilter, newPositiveAttributeFilter, objRefToString, } from "@gooddata/sdk-model";
 import { UnexpectedSdkError } from "@gooddata/sdk-ui";
 import { isValidSingleSelectionFilter } from "../utils.js";
 import { DISPLAY_FORM_CHANGED_CORRELATION, IRRELEVANT_SELECTION, MAX_SELECTION_SIZE, PARENT_FILTERS_CORRELATION, RESET_CORRELATION, SEARCH_CORRELATION, SHOW_FILTERED_ELEMENTS_CORRELATION, } from "./constants.js";
@@ -158,6 +158,11 @@ function refreshByType(handler, change, supportsKeepingDependentFiltersSelection
     if (change === "init-self") {
         handler.init();
     }
+    if (change === "init-self-preserve-selection") {
+        // Load the element options without re-deriving (and clobbering) the working selection
+        // that resetForModeSwitch just restored.
+        handler.init(undefined, false, true);
+    }
 }
 function isPrimaryLabelUsed(filter, displayForms) {
     const primaryDisplayForm = displayForms.find((df) => df.isPrimary);
@@ -278,9 +283,10 @@ function useInitOrReload(handler, props, supportsKeepingDependentFiltersSelectio
             return (!areFiltersEqual(filter, handler.getFilter()) &&
                 !areFiltersEqual(filter, handler.getFilterToDisplay()));
         };
-        // When text→elements mode switch happens, resetForModeSwitch already committed "All" to the handler.
-        // Suppress filterChanged so we don't override that reset with the stale filter prop (parent's
-        // onChange may not have propagated yet, so filter can still hold the old list selection).
+        // When text→elements mode switch happens, resetForModeSwitch already committed the target
+        // selection (restored List selection or "All") to the handler. Suppress filterChanged so we
+        // don't override that reset with the stale filter prop (parent's onChange may not have
+        // propagated yet, so filter can still hold the previous mode's selection).
         const justSwitchedFromText = prevIsTextModeRef.current && !isTextMode;
         prevIsTextModeRef.current = isTextMode;
         const filterChanged = justSwitchedFromText || selectionTypeChanged ? false : getFilterChanged(filter, handler);
@@ -307,10 +313,11 @@ function useInitOrReload(handler, props, supportsKeepingDependentFiltersSelectio
         let change = resetOnParentFilterChange
             ? updateAutomaticResettingFilter(handler, updateProps, supportsCircularDependencyInFilters)
             : updateNonResettingFilter(handler, updateProps, supportsKeepingDependentFiltersSelection);
-        // Safety net: if elements were not loaded yet (e.g., backend init was interrupted),
-        // trigger a full init when switching to elements mode so the list is populated.
+        // Switching back to elements mode from text mode: elements were not loaded in text mode, so
+        // trigger an init to populate the list — but preserve the working selection that
+        // resetForModeSwitch restored instead of re-deriving it from the stale filter prop.
         if (justSwitchedFromText) {
-            change = "init-self";
+            change = "init-self-preserve-selection";
         }
         refreshByType(handler, change, supportsKeepingDependentFiltersSelection, shouldReloadElements, setShouldReloadElements);
     }, [
@@ -642,8 +649,7 @@ export function useElementsFilterController(props) {
         handler.init(DISPLAY_FORM_CHANGED_CORRELATION, isTextMode);
     }, [handler, isTextMode]);
     const resetForModeSwitch = useCallback((newFilter, newDisplayAsLabel) => {
-        // we are always resetting to ALL filter
-        if (!handler || !isNegativeAttributeFilter(newFilter)) {
+        if (!handler) {
             return;
         }
         const displayFormRef = filterObjRef(newFilter);
@@ -652,9 +658,40 @@ export function useElementsFilterController(props) {
             handler.setDisplayAsLabel(newDisplayAsLabel);
         }
         handler.setSearch("");
-        handler.changeSelection({ keys: [], isInverted: true });
+        // Apply the target filter's actual selection (keys + inverted flag) to the WORKING
+        // selection. For an empty negative filter this resets to "All"; for a restored List filter
+        // it reinstates the previously displayed element selection.
+        const elements = filterAttributeElements(newFilter);
+        const keys = elements
+            ? isAttributeElementsByValue(elements)
+                ? elements.values
+                : elements.uris
+            : [];
+        handler.changeSelection({ keys, isInverted: isNegativeAttributeFilter(newFilter) });
+        // Only commit in the withoutApply flow. With a deferred Apply the committed selection must
+        // stay equal to the applied filter prop — committing here would make the filter-prop
+        // re-sync (updateFilter) see a difference and clobber the just-restored working selection.
         withoutApply && handler.commitSelection();
     }, [handler, withoutApply]);
+    // Builds an elements filter from the current working (not yet applied) selection. Used to snapshot
+    // the List selection before switching to Text so it can be restored on switch-back, including any
+    // changes the user made after the last Apply.
+    const getWorkingElementsFilter = useCallback(() => {
+        if (!handler) {
+            return undefined;
+        }
+        const committedFilter = handler.getFilter();
+        const committedElements = filterAttributeElements(committedFilter);
+        const { keys, isInverted } = handler.getWorkingSelection();
+        const elements = isAttributeElementsByValue(committedElements)
+            ? { values: keys }
+            : { uris: keys };
+        const displayForm = filterObjRef(committedFilter);
+        const localIdentifier = filterLocalIdentifier(committedFilter);
+        return isInverted
+            ? newNegativeAttributeFilter(displayForm, elements, localIdentifier)
+            : newPositiveAttributeFilter(displayForm, elements, localIdentifier);
+    }, [handler]);
     const callbacks = useCallbacks(handler, {
         onApply: onApply ?? (() => { }),
         onChange: onChange ?? (() => { }),
@@ -688,5 +725,6 @@ export function useElementsFilterController(props) {
         ...forcedInitErrorProp,
         setDisplayForm,
         resetForModeSwitch,
+        getWorkingElementsFilter,
     };
 }

package/esm/AttributeFilterHandler/internal/bridge.d.ts

@@ -17,7 +17,7 @@ export declare class AttributeFilterReduxBridge {
     private callbacks;
     constructor(config: AttributeFilterHandlerConfig);
     private initializeBridge;
-    init: (correlation: string, skipElementsLoading?: boolean | undefined) => void;
+    init: (correlation: string, skipElementsLoading?: boolean | undefined, preserveWorkingSelection?: boolean | undefined) => void;
     getInitStatus: () => AsyncOperationStatus;
     getInitError: () => GoodDataSdkError | undefined;
     onInitStart: CallbackRegistration<OnInitStartCallbackPayload>;

package/esm/AttributeFilterHandler/internal/bridge.js

@@ -33,10 +33,11 @@ export class AttributeFilterReduxBridge {
     //
     // Init
     //
-    init = (correlation, skipElementsLoading) => {
+    init = (correlation, skipElementsLoading, preserveWorkingSelection) => {
         this.redux.dispatch(actions.init({
             correlation,
             skipElementsLoading,
+            preserveWorkingSelection,
         }));
     };
     getInitStatus = () => {

package/esm/AttributeFilterHandler/internal/loader.d.ts

@@ -15,7 +15,7 @@ export declare class AttributeFilterLoader implements IAttributeFilterLoader {
     protected config: AttributeFilterHandlerConfig;
     protected constructor(config: AttributeFilterHandlerConfig);
     private validateStaticElementsLoad;
-    init: (correlation?: string, skipElementsLoading?: boolean | undefined) => void;
+    init: (correlation?: string, skipElementsLoading?: boolean | undefined, preserveWorkingSelection?: boolean | undefined) => void;
     onInitStart: CallbackRegistration<OnInitStartCallbackPayload>;
     onInitSuccess: CallbackRegistration<OnInitSuccessCallbackPayload>;
     onInitError: CallbackRegistration<OnInitErrorCallbackPayload>;

package/esm/AttributeFilterHandler/internal/loader.js

@@ -21,9 +21,9 @@ export class AttributeFilterLoader {
     //
     // Init
     //
-    init = (correlation = uuid(), skipElementsLoading) => {
+    init = (correlation = uuid(), skipElementsLoading, preserveWorkingSelection) => {
         this.validateStaticElementsLoad();
-        this.bridge.init(correlation, skipElementsLoading);
+        this.bridge.init(correlation, skipElementsLoading, preserveWorkingSelection);
     };
     onInitStart = (cb) => {
         return this.bridge.onInitStart(cb);

package/esm/AttributeFilterHandler/internal/redux/init/initReducers.d.ts

@@ -8,6 +8,7 @@ export declare const initReducers: {
         payload: {
             correlation: string;
             skipElementsLoading?: boolean | undefined;
+            preserveWorkingSelection?: boolean | undefined;
         };
         type: string;
     }>;

package/esm/AttributeFilterHandler/internal/redux/init/initSaga.js

@@ -18,7 +18,7 @@ import { initTotalCountSaga } from "./initTotalCount.js";
 export function* initWorker() {
     yield takeLatest(actions.init.match, initSaga);
 }
-function* initSaga({ payload: { correlation, skipElementsLoading = false }, }) {
+function* initSaga({ payload: { correlation, skipElementsLoading = false, preserveWorkingSelection = false }, }) {
     try {
         yield put(actions.initStart({ correlation }));
         if (skipElementsLoading) {
@@ -36,7 +36,14 @@ function* initSaga({ payload: { correlation, skipElementsLoading = false }, }) {
         const loadTotal = !isLimitingAttributeFiltersEmpty(limitingFilters) ||
             limitingValidationItems.length > 0 ||
             limitingDateFilters.length > 0;
-        const sagas = [initSelectionSaga, initAttributeElementsPageSaga];
+        // When switching back to elements mode from text mode, the working/committed selection has
+        // already been restored by resetForModeSwitch and its elements are still cached. Re-running
+        // initSelectionSaga would re-derive the selection from the (stale, last-applied) filter prop
+        // and clobber a pending working selection, so skip it. The element options list is
+        // still populated by initAttributeElementsPageSaga.
+        const sagas = preserveWorkingSelection
+            ? [initAttributeElementsPageSaga]
+            : [initSelectionSaga, initAttributeElementsPageSaga];
         if (hiddenElements?.length > 0) {
             // the rest need the attribute already loaded for the hiddenElements to work
             yield call(initAttributeSaga, correlation);

package/esm/AttributeFilterHandler/internal/redux/store/rootReducers.d.ts

@@ -131,6 +131,7 @@ export declare const rootReducers: {
         payload: {
             correlation: string;
             skipElementsLoading?: boolean | undefined;
+            preserveWorkingSelection?: boolean | undefined;
         };
         type: string;
     }>;

package/esm/AttributeFilterHandler/internal/redux/store/slice.d.ts

@@ -136,6 +136,7 @@ export declare const actions: import("@reduxjs/toolkit").CaseReducerActions<{
         payload: {
             correlation: string;
             skipElementsLoading?: boolean | undefined;
+            preserveWorkingSelection?: boolean | undefined;
         };
         type: string;
     }>;

package/esm/AttributeFilterHandler/types/attributeFilterLoader.d.ts

@@ -36,8 +36,10 @@ export interface IAttributeFilterLoader extends IAttributeLoader, IAttributeElem
      *
      * @param correlation - correlation that will be included in all callbacks fired by this method
      * @param skipElementsLoading - when true, only loads attribute metadata (skips elements, selection, total count)
+     * @param preserveWorkingSelection - when true, keeps the current working/committed selection instead of
+     *  re-deriving it from the filter (used when switching back to elements mode from text mode)
      */
-    init(correlation?: Correlation, skipElementsLoading?: boolean): void;
+    init(correlation?: Correlation, skipElementsLoading?: boolean, preserveWorkingSelection?: boolean): void;
     /**
      * Returns the current status of the initialization.
      */

package/esm/FilterGroup/FilterGroup.js

@@ -100,6 +100,11 @@ export function FilterGroup(props) {
                 return;
             }
             function AttributeFilterComponent(attributeFilterProps) {
+                const isMobile = useMediaQuery("mobileDevice");
+                // On mobile, render filters inside the group same as standard mobile attribute filter row.
+                const InnerDropdownButton = isMobile
+                    ? AttributeFilterDropdownButton
+                    : FilterGroupItem;
                 // When the filter swaps between Loading / Error / DropdownButton renderings,
                 // the focused DOM node is unmounted. Capture focus on ref-cleanup and
                 // re-apply it when the replacement mounts, so the user doesn't visually lose focus.
@@ -125,14 +130,17 @@ export function FilterGroup(props) {
                 }, []);
                 const DropdownButtonComponent = useCallback(function DropdownButtonComponent({ buttonRef, ...props }) {
                     const titleExtension = getTitleExtension?.(filterIdentifier, props.title);
-                    const CustomDropdownButtonComponent = attributeFilterProps.DropdownButtonComponent ??
-                        FilterGroupItem;
+                    const CustomDropdownButtonComponent = attributeFilterProps.DropdownButtonComponent ?? InnerDropdownButton;
                     const handleButtonRef = useMergeRefs(buttonRef, setFilterItemRef);
-                    return (_jsx(CustomDropdownButtonComponent, { ...props, titleExtension: _jsxs(_Fragment, { children: [props.titleExtension, titleExtension, _jsx(FilterButtonCustomIcon, { customIcon: props.customIcon, disabled: props.disabled })
-                            ] }), buttonRef: handleButtonRef }));
-                }, [attributeFilterProps.DropdownButtonComponent, setFilterItemRef]);
-                const LoadingComponent = useCallback(() => _jsx(FilterGroupItem, { isLoading: true, buttonRef: setFilterItemRef }), [setFilterItemRef]);
-                const ErrorComponent = useCallback(() => _jsx(FilterGroupItem, { isError: true, buttonRef: setFilterItemRef }), [setFilterItemRef]);
+                    return (_jsx(CustomDropdownButtonComponent, { ...props, titleExtension: _jsxs(_Fragment, { children: [props.titleExtension, titleExtension, isMobile ? null : (_jsx(FilterButtonCustomIcon, { customIcon: props.customIcon, disabled: props.disabled }))] }), buttonRef: handleButtonRef, isOpen: isMobile ? true : props.isOpen }));
+                }, [
+                    attributeFilterProps.DropdownButtonComponent,
+                    InnerDropdownButton,
+                    setFilterItemRef,
+                    isMobile,
+                ]);
+                const LoadingComponent = useCallback(() => (_jsx(InnerDropdownButton, { isLoading: true, buttonRef: setFilterItemRef, isOpen: isMobile ? true : undefined })), [setFilterItemRef, InnerDropdownButton, isMobile]);
+                const ErrorComponent = useCallback(() => (_jsx(InnerDropdownButton, { isError: true, buttonRef: setFilterItemRef, isOpen: isMobile ? true : undefined })), [setFilterItemRef, InnerDropdownButton, isMobile]);
                 const ElementsSearchBarComponent = useCallback((props) => (_jsx(AttributeFilterElementsSearchBar, { ...props, onKeyDown: (e) => {
                         // allow space key to be handled by filter search bar
                         // and not stolen by filter group dropdown keyboard navigation
@@ -153,14 +161,20 @@ export function FilterGroup(props) {
                 return;
             }
             function MeasureValueFilterComponent(measureValueFilterProps) {
+                const isMobile = useMediaQuery("mobileDevice");
                 const setFilterItemRef = useCallback((element) => {
                     filterItemRefs.current.set(filterIdentifier, element);
                 }, []);
-                const DropdownButtonComponent = useCallback(function DropdownButtonComponent({ buttonTitle, buttonSubtitle, buttonTitleExtension, disabled, isActive, onClick, }) {
+                const FilterGroupItemDropdownButton = useCallback(function DropdownButtonComponent({ buttonTitle, buttonSubtitle, buttonTitleExtension, disabled, isActive, onClick, }) {
                     const titleExtension = getTitleExtension?.(filterIdentifier, buttonTitle);
                     return (_jsx(FilterGroupItem, { title: buttonTitle, subtitle: buttonSubtitle ?? undefined, isOpen: isActive, isLoaded: true, disabled: disabled, titleExtension: _jsxs(_Fragment, { children: [buttonTitleExtension, titleExtension] }), onClick: onClick, buttonRef: setFilterItemRef }));
                 }, [setFilterItemRef]);
-                return (_jsx(MeasureValueFilter, { ...measureValueFilterProps, alignPoints: ITEM_ALIGN_POINTS, DropdownButtonComponent: measureValueFilterProps.DropdownButtonComponent ?? DropdownButtonComponent }));
+                // On mobile, fall back to MeasureValueFilter's own default dropdown button (a
+                // standard mobile filter row) instead of FilterGroupItem.
+                const DropdownButtonComponent = isMobile
+                    ? measureValueFilterProps.DropdownButtonComponent
+                    : (measureValueFilterProps.DropdownButtonComponent ?? FilterGroupItemDropdownButton);
+                return (_jsx(MeasureValueFilter, { ...measureValueFilterProps, alignPoints: ITEM_ALIGN_POINTS, DropdownButtonComponent: DropdownButtonComponent }));
             }
             result.set(filterIdentifier, MeasureValueFilterComponent);
         });
@@ -198,12 +212,14 @@ export function FilterGroup(props) {
     }, [getFilterIdentifier]);
     const groupAriaLabel = intl.formatMessage({ id: "filterGroup.aria.label" }, { title });
     const groupAriaLabelWithState = intl.formatMessage({ id: "filterGroup.aria.label.withState" }, { title, state: subtitle });
-    const renderBody = useCallback(({ isMobile, closeDropdown }) => (_jsx("div", { role: "dialog", "aria-label": groupAriaLabel, onKeyDownCapture: handleKeyDownCapture, onKeyDown: handleKeyDown, children: _jsx(DropdownList, { className: "gd-filter-group-body", items: filters, maxHeight: 450, itemHeight: 53, accessibilityConfig: {
+    const renderBody = useCallback(({ isMobile, closeDropdown }) => (_jsx("div", { role: "dialog", "aria-label": groupAriaLabel, onKeyDownCapture: handleKeyDownCapture, onKeyDown: handleKeyDown, children: _jsx(DropdownList, { className: cx("gd-filter-group-body", { "gd-is-mobile": isMobile }), items: filters, maxHeight: 450, itemHeight: isMobile ? 47 : 53, accessibilityConfig: {
                 role: "list",
                 ariaLabel: groupAriaLabel,
             }, renderItem: renderItem, onKeyDownSelect: handleItemKeyboardAction, closeDropdown: closeDropdown, isMobile: isMobile }) })), [filters, renderItem, handleKeyDown, handleKeyDownCapture, handleItemKeyboardAction, groupAriaLabel]);
     const isMobile = useMediaQuery("mobileDevice");
-    const renderButton = useCallback(({ toggleDropdown, isOpen, buttonRef, dropdownId }) => (_jsx("div", { className: cx({ "gd-is-mobile": isMobile && isOpen }), children: _jsx(AttributeFilterDropdownButton, { title: title, subtitle: subtitle, isLoaded: !isAnyFilterError, isOpen: isOpen, selectedItemsCount: selectedItemsCount, totalItemsCount: totalItemsCount, showSelectionCount: selectedItemsCount !== undefined || totalItemsCount !== undefined, icon: _jsx(UiIcon, { type: "folderSmall", size: 12, color: "complementary-6" }), dropdownId: dropdownId, buttonRef: buttonRef, onClick: toggleDropdown, isError: isAnyFilterError, ariaLabel: groupAriaLabelWithState }) })), [
+    const renderButton = useCallback(({ toggleDropdown, isOpen, buttonRef, dropdownId }) => (_jsx("div", { className: cx({
+            "gd-attribute-filter-mobile-button-wrapper gd-is-mobile gd-is-mobile--with-menu": isMobile && isOpen,
+        }), children: _jsx(AttributeFilterDropdownButton, { title: title, subtitle: subtitle, isLoaded: !isAnyFilterError, isOpen: isOpen, selectedItemsCount: selectedItemsCount, totalItemsCount: totalItemsCount, showSelectionCount: selectedItemsCount !== undefined || totalItemsCount !== undefined, icon: _jsx(UiIcon, { type: "folderSmall", size: 12, color: "complementary-6" }), dropdownId: dropdownId, buttonRef: buttonRef, onClick: toggleDropdown, isError: isAnyFilterError, ariaLabel: groupAriaLabelWithState }) })), [
         title,
         subtitle,
         isAnyFilterError,

package/esm/MeasureValueFilter/ConditionInputSection.d.ts

@@ -17,7 +17,6 @@ export interface IConditionInputSectionProps {
         };
     } | undefined;
     usePercentage: boolean;
-    baseDisableAutofocus?: boolean;
     separators?: ISeparators;
     onValueChange: (index: number, value: number) => void;
     onFromChange: (index: number, from: number) => void;

package/esm/MeasureValueFilter/ConditionInputSection.js

@@ -7,12 +7,12 @@ import { ComparisonInput } from "./ComparisonInput.js";
 import { RangeInput } from "./RangeInput.js";
 export const ConditionInputSection = memo(function ConditionInputSection(props) {
     const intl = useIntl();
-    const { index, conditionNumber, condition, usePercentage, baseDisableAutofocus, separators, onValueChange, onFromChange, onToChange, onValueBlur, onFromBlur, onToBlur, onApply, } = props;
+    const { index, conditionNumber, condition, usePercentage, separators, onValueChange, onFromChange, onToChange, onValueBlur, onFromBlur, onToBlur, onApply, } = props;
     if (!condition || condition.operator === "ALL") {
         return null;
     }
-    // Only the first condition can autofocus inputs. All others explicitly disable autofocus.
-    const disableAutofocus = baseDisableAutofocus === true || index !== 0;
+    // Never autofocus the value inputs. Initial focus must stay on the operator dropdown button.
+    const disableAutofocus = true;
     const errorId = `mvf-validation-error-${index}`;
     if (isComparisonConditionOperator(condition.operator)) {
         const v = condition.value.value;
@@ -25,7 +25,7 @@ export const ConditionInputSection = memo(function ConditionInputSection(props)
             })
             : undefined;
         return (_jsxs(_Fragment, { children: [
-                _jsx(ComparisonInput, { value: condition.value.value, usePercentage: usePercentage, onValueChange: (v) => onValueChange(index, v), onEnterKeyPress: onApply, onBlur: () => onValueBlur(index), hasError: shouldShowError, ariaDescribedBy: shouldShowError ? errorId : undefined, disableAutofocus: disableAutofocus, separators: separators, conditionNumber: conditionNumber }), shouldShowError ? (_jsx("div", { id: errorId, className: "gd-mvf-input-error s-mvf-input-error", "data-testid": errorId, role: "alert", children: validationErrorText })) : null] }));
+                _jsx(ComparisonInput, { value: condition.value.value, usePercentage: usePercentage, onValueChange: (v) => onValueChange(index, v), onEnterKeyPress: onApply, onBlur: () => onValueBlur(index), hasError: shouldShowError, ariaDescribedBy: shouldShowError ? errorId : undefined, disableAutofocus: disableAutofocus, separators: separators, conditionNumber: conditionNumber }), shouldShowError ? (_jsx("div", { id: errorId, className: "gd-mvf-input-error s-mvf-input-error", "data-testid": errorId, children: validationErrorText })) : null] }));
     }
     if (isRangeConditionOperator(condition.operator)) {
         const { from = null, to = null } = condition.value;

package/esm/MeasureValueFilter/Dropdown.js

@@ -25,7 +25,7 @@ const DropdownWithIntl = memo(function DropdownWithIntl(props) {
         return (_jsx(FullScreenOverlay, { alignTo: "body", alignPoints: MOBILE_DROPDOWN_ALIGN_POINTS, onClose: onCancel, children: _jsxs("div", { className: "gd-mobile-dropdown-overlay overlay gd-flex-row-container gd-mvf-mobile-dropdown", children: [mobileHeader ? (_jsx("div", { className: "gd-mobile-dropdown-header gd-flex-item gd-mvf-mobile-dropdown-header gd-is-mobile", children: mobileHeader })) : null, _jsx("div", { className: "gd-mobile-dropdown-content gd-flex-item-stretch gd-flex-row-container gd-mvf-mobile-dropdown-content", children: body })
                 ] }) }));
     }
-    return (_jsx(Overlay, { alignTo: anchorEl, alignPoints: alignPoints ?? DROPDOWN_ALIGNMENTS, closeOnOutsideClick: true, closeOnParentScroll: true, closeOnMouseDrag: true, onClose: onCancel, children: body }));
+    return (_jsx(Overlay, { alignTo: anchorEl, alignPoints: alignPoints ?? DROPDOWN_ALIGNMENTS, closeOnOutsideClick: true, closeOnParentScroll: true, closeOnMouseDrag: true, closeOnEscape: true, onClose: onCancel, children: body }));
 });
 export function Dropdown(props) {
     return (_jsx(IntlWrapper, { locale: props.locale, children: _jsx(DropdownWithIntl, { ...props }) }));

package/esm/MeasureValueFilter/DropdownBody.d.ts

@@ -10,7 +10,6 @@ interface IDropdownBodyProps extends IMeasureValueFilterCustomComponentProps {
     usePercentage?: boolean;
     warningMessage?: WarningMessage;
     locale?: string;
-    disableAutofocus?: boolean;
     onCancel?: () => void;
     measureTitle?: string;
     onApply: IMeasureValueFilterDropdownCallback;