From 5565aa8fd7b6918b81161f1480e53c27486b44a4 Mon Sep 17 00:00:00 2001 From: Sudhanshu Date: Sun, 13 Aug 2023 23:33:30 +0530 Subject: [PATCH] Add note for minValue and maxValue --- documentation/v5/docs/quirks.md | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/documentation/v5/docs/quirks.md b/documentation/v5/docs/quirks.md index bddb7628..7a87cfe6 100644 --- a/documentation/v5/docs/quirks.md +++ b/documentation/v5/docs/quirks.md @@ -17,11 +17,11 @@ values object is on following format } ``` -Its recommended to use formattedValue / value / floatValue based on the initial state (it should be same as the initial state format) which you are passing as value prop. If you are saving the `value` key on state make sure to pass valueIsNumericString prop to true. +Its recommended to use formattedValue / value / floatValue based on the initial state (it should be same as the initial state format) which you are passing as value prop. If you are saving the `value` key on state and any of the format prop like prefix/suffix contains number make sure to pass valueIsNumericString prop to true. ### Notes and quirks -1. Value can be passed as string or number, but if it is passed as string it should be either formatted value or if it is a numeric string, you have to set valueIsNumericString props to true. +1. Value can be passed as string or number, but if it is passed as string it should be either formatted value or if it is a numeric string and any of the format prop like prefix/suffix contains number, you have to set valueIsNumericString props to true. 2. Value as prop will be rounded to given decimal scale if format option is not provided. @@ -35,6 +35,10 @@ Its recommended to use formattedValue / value / floatValue based on the initial 7. onValueChange is not same as onChange. It gets called on whenever there is change in value which can be caused by any event like change or blur event or by a prop change. It also provides a second argument which contains the event object and the reason for this function trigger. +8. `minLength` and `maxLength` prop of native input doesn't work as expected, as the formatting happens post the number is added on the input. You can achieve similar result using isAllowed prop. + +Related issue: https://github.com/s-yadav/react-number-format/issues/758 + ## SourceInfo object The `sourceInfo` object indicates whether the triggered change is due to an event or a prop change. This is particularly useful in identify whether the change is user driven or is an uncontrolled change due to any prop value being updated.