I'm using the ComboBox component and would like to restrict the values that you can manually enter into the field above the dropdown.
(See screenshot).
I have two scenarios:
1) Only allow to enter integer values (numeric, no comma or dot allowed), both negative and positive values are allowed;
2) Only allow to enter float values (numeric with comma or dot), both negative and positive values are allowed;
I tried to restrict the input by managing the keyDown event but I'm not sure if this is the right approach.
Do you maybe have an example for me, how I could better solve this?
Thanks!
Greetings,
Bernd
1 Answer, 1 is accepted
Hello, Bernd,
Thank you for the provided screenshot.
Both scenarios can be achieved by rendering the ComboBox in controlled mode and handling the value in the onChange event handler.
In order to allow only integer values, you can use the isInteger() method. In the below example, since the event value is a string, I am first converting it to a Number, then checking if it is an Integer to set it to the `value` state variable. There is also a corner case where values like `1.0` are considered Integers by Javascript. Therefore I added an extra check to see if the value contains the `.` character:
On the other hand, the entered value is a float if it is not an integer, but using isInteger() will not allow values with the `,` character. Therefore, you can check if the event value contains either `,` or `.` without using the isInteger() method. Here is an example of both implementations:
Please check the above examples, and let us know if they match your use case scenario. You can also consider using the parseInt() and parseFloat() methods to check the validity of the numbers.
If you do not necessarily need the ComboBox, I would suggest checking the NumericTextBox component that has a format property. It restricts the user input directly when the typed characters do not match the format:
- https://stackblitz.com/edit/react-e6x811-djtebs?file=app%2Fmain.jsx
- https://www.telerik.com/kendo-react-ui/components/inputs/numerictextbox/
Regards,
Wissam
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 5
Bronze
Bronze
Bronze
Hi.
First of all thank you for this very detailed answer!
The example with the 2 implementation should definitely work. I will update my implementation and check today.
The NumericTextBox unfortunately does not work for me because the field must also have a dropdown. So I can't use the format property. Maybe it's an idea to add this to the ComboBox too? :-)
Thanks again,
Greetings,
Bernd
You are welcome, Bernd! I am glad that my reply was helpful to you.
If you still have further questions related to this thread, please let us know.
Moreover, if you need a certain feature, you can submit a feature request in our feedback portal where new ideas are constantly being evaluated and the most popular ones are implemented in future releases:
Regards,
Wissam
Progress Telerik