Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Fix NumberInput seems buggy when used in a FilterForm #7830

Merged
merged 1 commit into from
Jun 15, 2022
Merged

Conversation

fzaninotto
Copy link
Member

  • Add format on enter to NumberInput
  • Document usage gotcha in filter form

The Filter Button/Form combo changes the filter value as the user types. But, as explained earlier in this page, <NumberInput> converts the input value to a number on blur.

This means that using <NumberInput> in a filter form will not work as expected. The filter will only change when the user presses the Enter key, which differs from the other input types.

In a filter form, you should use a <TextInput type="number"> instead:

import { TextInput } from 'react-admin';

const convertStringToNumber = value => {
    const float = parseFloat(value);
    return isNaN(float) ? null : float;
};

const productFilters = [
    <TextInput label="Stock less than" source="stock_lte" type="number" parse={convertStringToNumber} />,
];

export const ProductList = (props) => (
    <List {...props} filters={postFilters}>
        ...
    </List>
);

@djhi djhi added this to the 4.1.4 milestone Jun 15, 2022
@djhi djhi merged commit 23a3044 into master Jun 15, 2022
@djhi djhi deleted the fix-number-input branch June 15, 2022 15:30
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
RFR Ready For Review
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants