Hello. We tried adding the read-only and restrictions props to the numeric text box for Kendo React but this props are not available right now only for Kendo Angular. We need the read-only props in our implementation and also the restriction functionality(the auto correct) as provided for Kendo Angular in the following examples
https://stackblitz.com/run/?file=app/app.component.ts
https://www.telerik.com/kendo-angular-ui/components/inputs/numerictextbox/precision/.
Right now if we enter min={0} and then we enter a value through the keyboard it allow us to insert a negative value that resets to 0 after unfocus. We need to prevent the user from inserting negative numbers as per the functionality in the Kendo Angular.
How can we achieve this?
Thank you.
1 Answer, 1 is accepted
Hi Goce,
Currently, the NumericTextBox does not have a readonly prop that can be added to it, however the JavaScript setAttribute method can be used to add this attribute to the input field within the Numeric:
https://stackblitz.com/edit/react-zwvzl7-8friuc?file=app/main.jsx
This will make the input field readonly, but will not prevent the steps from increasing or decreasing the value. Preventing the steps from changing the value can be done by using the step property of the NumericTextBox and setting it to 0, as shown in the example above:
https://www.telerik.com/kendo-react-ui/components/inputs/api/NumericTextBoxProps/#toc-step
The behavior when setting restrictions with min and max is expected, since even though the component is in controlled mode, the value of the input is being 'locked' during focus, in order to allow the user to accomplish some specific scenarios. This allows the user to enter invalid values, since sometimes it is necessary to enter an invalid value at first to reach a valid one:
https://github.com/telerik/kendo-react/issues/102
Our team does realize that this approach has some limitations and we are investigating whether we can provide support for both cases without them interfering with each other.
There is already a task logged for this, and we will post any updates regarding this here:
https://github.com/telerik/kendo-react/issues/878
Currently, there is no workaround available, if one is found it will be added to the issue.
Regards,
Krissy
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.