Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Jump to bottom

[Doc] Fix <NumberInput> usage in Filter Forms #9186

Merged
merged 3 commits into from
Aug 16, 2023
Merged

[Doc] Fix <NumberInput> usage in Filter Forms #9186

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9f15f40
[doc] Fix `<NumberInput>` usage in Filter Forms
fzaninotto Aug 14, 2023
34a0406
Update docs/NumberInput.md
fzaninotto Aug 16, 2023
e3140d0
Fix typo
fzaninotto Aug 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 24 additions & 33 deletions docs/NumberInput.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,18 +13,36 @@ title: "The NumberInput Component"
Your browser does not support the video tag.
</video>

Upon submission, the `dataProvider` will receive a number, not a string.

## Usage

```jsx
import { NumberInput } from 'react-admin';
Use `<NumberInput>` for number values, or for string values that convert to a number. For instance, if your API expects Post records to look like this:

<NumberInput source="nb_views" />
```json
{
"id": 123,
"title": "Lorem Ipsum",
"average_note": 4
}
```

`<NumberInput>` converts the input value to a number (integer or float) *on blur*. This is because if the input updates the form value on every keystroke, it will prevent users from entering certain float values. For instance, to enter the number `1.02`, a user would type `1.0`, that JavaScript converts to the number `1`.
Then you can use a `<NumberInput>` for the `average_note` field:

```jsx
import { Edit, SimpleForm, TextInput, NumberInput, required } from 'react-admin';

export const PostEdit = () => (
<Edit>
<SimpleForm>
<TextInput source="title" />
<NumberInput source="average_note" validate={[required()]} />
</SimpleForm>
</Edit>
);
```

If you need the form value to update on change instead of on blur (for instance to update another input based on the number input value), you can build your own number input using `<TextInput>`, and the `format` and `parse` props. But be aware that this only works for integer values.
`<NumberInput>` works for integer and float values.

## Props

Expand All @@ -34,7 +52,7 @@ If you need the form value to update on change instead of on blur (for instance
| `min` | Optional | `number` | '' | The minimum value to accept for this input |
| `step` | Optional | `number` | `any` | A stepping interval to use when using up and down arrows to adjust the value, as well as for validation |

`<NumberInput>` also accepts the [common input props](./Inputs.md#common-input-props).
`<NumberInput>` also accepts the [common input props](./Inputs.md#common-input-props) (including `parse` and `format`, which you can use to customize the string to number conversion).

## `step`

Expand All @@ -43,30 +61,3 @@ You can customize the `step` props (which defaults to "any"). For instance, to r
```jsx
<NumberInput source="nb_views" step={1} />
```

## Usage In Filter Form

The [Filter Button/Form combo](https://marmelab.com/react-admin/FilteringTutorial.html#the-filter-buttonform-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:

```jsx
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 = () => (
<List filters={productFilters}>
...
</List>
);
```
Loading