other-emerald•5d ago

Missing props on FilterDropDownProps

I'm building a custom column filter for an ant design table component that looks like this: export const simpleFilterInput = (columnProps: SimpleColumnProps, filterDropdownProps: FilterDropdownProps): React.ReactElement => { return <FilterDropdown { ... filterDropdownProps} > <InputNumber onPressEnter={() => { filterDropdownProps.confirm() }} /> </FilterDropdown> } This works fine when I test it: I see the column filter is a number box and when I hit enter, the filter is automatically applied rather than requiring me to click the button. However, after I posted my code to github, the CI/CD runner is complaining that 'confirm' doesn't exist on FilterDropdownProps (though the error provides a fully annotated type with only 'mapValue' and 'children' properties. Why would that be?

8 Replies

kapa.ai•5d ago

Hi @Hypnotic Meat. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The issue you're encountering is likely due to a mismatch between the documented/expected props for the <FilterDropdown /> component and the type definition your CI/CD runner is using. According to the official Refine documentation, the props passed to <FilterDropdown /> in the context of Ant Design tables should include selectedKeys, setSelectedKeys, confirm, and clearFilters. These are provided by Ant Design's <Table.Column filterDropdown> prop and are necessary for the filter dropdown to function correctly, including programmatically confirming the filter (as you do with filterDropdownProps.confirm()) see official usage. However, your CI/CD runner is reporting that FilterDropdownProps only includes mapValue and children. This suggests that the type definition being used in your CI/CD environment is not the one intended for use with Ant Design's <Table.Column filterDropdown>, but rather a more generic or different version of the props. Why is this happening? - The documentation and examples show that the props passed to <FilterDropdown /> from <Table.Column filterDropdown> should include confirm and others, as they are provided by Ant Design's table internals see properties. - If your type definition only includes mapValue and children, it may be importing the wrong FilterDropdownProps type, or the type definitions in your environment are outdated or mismatched. What to do: - Ensure you are using the correct and up-to-date version of @refinedev/antd in your project and CI/CD environment. - Double-check your import paths and type definitions to make sure you are using the FilterDropdownProps that matches the usage with Ant Design tables. - If you are using TypeScript, you may need to explicitly type the props as coming from Ant Design's filterDropdown context, not just the component's own props. Summary:
The confirm prop should exist on the props passed to <FilterDropdown /> when used as a filter dropdown in Ant Design tables. If your type definition does not include it, you are likely using the wrong or outdated type. Update your dependencies and check your imports to resolve the issue. References: - FilterDropdown Usage - FilterDropdown Properties ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5d ago

<@224018850419572736> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

other-emeraldOP•5d ago

@kapa.ai as a test, I changed the import for FilterDropdownProps to pull from antd/es/table/interface, and things generally still work for my other filter types (text, dropdown), however, when I try and filter with the number input by hitting enter, it doesn't actually set the value in the number input and effectively just clears it out. How can I correct that?

kapa.ai•5d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the knowledge sources, the issue you're experiencing is related to how Ant Design's <InputNumber /> interacts with the filter dropdown mechanism and the expected types for filter values. Key points from the sources: - Ant Design's <Table.Column filterDropdown> expects the filter value to be an array of strings, but <InputNumber /> works with numbers. If you use a number directly, Ant Design may treat it as invalid and clear the input, especially when confirming the filter with Enter. This is a known quirk and is discussed in several issues and documentation examples. - The recommended approach is to use the mapValue prop on <FilterDropdown /> to normalize the value types between what Ant Design expects (string) and what your input component uses (number). Specifically, you should convert the string value from Ant Design to a number for <InputNumber />, and convert it back to a string when confirming the filter. This ensures the value is displayed and handled correctly in both the UI and the filter logic. Example solution:

<FilterDropdown
    {...filterDropdownProps}
    mapValue={(selectedKeys, event) => {
        // When rendering the value in the input, convert string to number
        if (event === "value") {
            return selectedKeys.map((key) => (key !== undefined ? Number(key) : undefined));
        }
        // When confirming the filter, convert number back to string
        if (event === "onChange") {
            return selectedKeys.map((key) => (key !== undefined ? key.toString() : undefined));
        }
        return selectedKeys;
    }}
>
    <InputNumber
        onPressEnter={() => {
            filterDropdownProps.confirm();
        }}
        // Make sure value is controlled by selectedKeys[0]
        value={filterDropdownProps.selectedKeys[0] !== undefined ? Number(filterDropdownProps.selectedKeys[0]) : undefined}
        onChange={(value) => {
            filterDropdownProps.setSelectedKeys(value !== undefined ? [value] : []);
        }}
        style={{ width: "100%" }}
    />
</FilterDropdown>

<FilterDropdown
    {...filterDropdownProps}
    mapValue={(selectedKeys, event) => {
        // When rendering the value in the input, convert string to number
        if (event === "value") {
            return selectedKeys.map((key) => (key !== undefined ? Number(key) : undefined));
        }
        // When confirming the filter, convert number back to string
        if (event === "onChange") {
            return selectedKeys.map((key) => (key !== undefined ? key.toString() : undefined));
        }
        return selectedKeys;
    }}
>
    <InputNumber
        onPressEnter={() => {
            filterDropdownProps.confirm();
        }}
        // Make sure value is controlled by selectedKeys[0]
        value={filterDropdownProps.selectedKeys[0] !== undefined ? Number(filterDropdownProps.selectedKeys[0]) : undefined}
        onChange={(value) => {
            filterDropdownProps.setSelectedKeys(value !== undefined ? [value] : []);
        }}
        style={{ width: "100%" }}
    />
</FilterDropdown>

This approach is also reflected in the documentation and community discussions, where mapping between string and number is necessary for correct behavior with Ant Design tables and filter dropdowns, especially for number inputs. Without this mapping, the input may not display the value correctly or may clear it on confirm, as you've observed see discussion and workaround and related issue. Summary:
To fix the issue, use the mapValue prop on <FilterDropdown /> to handle the conversion between string (as expected by Ant Design) and number (as used by <InputNumber />). This will ensure the value is displayed and set correctly when filtering with Enter. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5d ago

<@224018850419572736> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

other-emeraldOP•5d ago

@kapa.ai when I make those changes, the number input now just displays NaN every time I try to type a number into it. Even if I use the up/down arrows on the right side of the component to increment/decrement.

kapa.ai•5d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- The behavior you're seeing—where the <InputNumber /> displays NaN—is a common pitfall when mapping values between string and number types in Ant Design filter dropdowns. This typically happens if the value passed to <InputNumber /> is not a valid number (e.g., undefined, null, or a non-numeric string). Key points from the knowledge sources: - Ant Design's filter values are always strings when coming from the URL or filter state, but <InputNumber /> expects a number. If you pass a string that can't be converted to a number, you'll get NaN in the input. - The recommended approach is to use the mapValue prop to convert between string and number, but you must ensure that the value passed to <InputNumber /> is either a valid number or undefined (not NaN). How to avoid NaN: When mapping the value for <InputNumber />, you should check if the value is a valid number before passing it. If not, pass undefined instead. Here’s a safe way to do it:

<FilterDropdown
    {...filterDropdownProps}
    mapValue={(selectedKeys, event) => {
        if (event === "value") {
            // Convert string to number, but filter out invalid values
            return selectedKeys.map((key) => {
                const num = Number(key);
                return isNaN(num) ? undefined : num;
            });
        }
        if (event === "onChange") {
            // Convert number back to string for Ant Design
            return selectedKeys.map((key) =>
                key !== undefined && key !== null ? key.toString() : ""
            );
        }
        return selectedKeys;
    }}
>
    <InputNumber
        onPressEnter={() => {
            filterDropdownProps.confirm();
        }}
        value={
            // Only pass a valid number or undefined
            typeof filterDropdownProps.selectedKeys[0] === "string"
                ? Number(filterDropdownProps.selectedKeys[0]) || undefined
                : filterDropdownProps.selectedKeys[0]
        }
        onChange={(value) => {
            filterDropdownProps.setSelectedKeys(
                value !== undefined && value !== null ? [value] : []
            );
        }}
        style={{ width: "100%" }}
    />
</FilterDropdown>

<FilterDropdown
    {...filterDropdownProps}
    mapValue={(selectedKeys, event) => {
        if (event === "value") {
            // Convert string to number, but filter out invalid values
            return selectedKeys.map((key) => {
                const num = Number(key);
                return isNaN(num) ? undefined : num;
            });
        }
        if (event === "onChange") {
            // Convert number back to string for Ant Design
            return selectedKeys.map((key) =>
                key !== undefined && key !== null ? key.toString() : ""
            );
        }
        return selectedKeys;
    }}
>
    <InputNumber
        onPressEnter={() => {
            filterDropdownProps.confirm();
        }}
        value={
            // Only pass a valid number or undefined
            typeof filterDropdownProps.selectedKeys[0] === "string"
                ? Number(filterDropdownProps.selectedKeys[0]) || undefined
                : filterDropdownProps.selectedKeys[0]
        }
        onChange={(value) => {
            filterDropdownProps.setSelectedKeys(
                value !== undefined && value !== null ? [value] : []
            );
        }}
        style={{ width: "100%" }}
    />
</FilterDropdown>

Summary:
The NaN issue occurs if you pass an invalid number to <InputNumber />. Always check and sanitize the value before passing it to the input. This approach is consistent with the guidance and workarounds discussed in the knowledge sources, which highlight the need for careful type normalization between Ant Design's string-based filter state and number-based input components see discussion and workaround and related issue. If you continue to see issues, double-check that your mapValue and value handling logic always result in a valid number or undefined for the input. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5d ago

<@224018850419572736> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Missing props on FilterDropDownProps

Did you find this page helpful?