Greetings
Just upgraded our version from 2022.1.119 to 2022.2.802.
A user just called us that they can't use our maskedtextboxes anymore.
After further inspection it seems the control is now broken when using client side validation, more specifically the maxlength one.
Example: https://stackblitz.com/edit/web-platform-dclrcx?file=index.html
When the length of the mask >= the max length (from the validation), then you can only replace characters. Normal key inputs don't work anymore.
If you look at the example, when you focus the inputfield, you can no longer type in it.
If you were to increase the maxlength validation by one, then the maskedtextbox will work as expected again.
Regards
Hello Korstiaan,
Thank you for sharing details about your scenario.
I've contacted our dev team for additional investigation and they confirmed, the behavior could be accepted as a bug in the wrappers. You can follow the status of the issues here.
As appreciation for reporting this issue to us, I've updated your Telerik points.
Regards,
Milena
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.
Hi Korstiaan,
Today Milena is out of the office and cannot reply to your question. However, I will transfer the thread to the team responsible for Kendo UI for ASP.NET Core which will be able to help you best. Please expect another reply shortly.
Regards,
Nikolay
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/.
Hello Milena
Using a plain textbox is out of the question.
It delivers a poor user experience when the field has to comply to a certain regex.
While a mask (without the maxlength attribute) does prevent users from entering something that doesn't meet our regex pattern and length requirements, nothing prevents someone from posting their own data to our endpoint without using our frontend.
It's also best practice to validate data as early as possible in MVC, before it even hits the data access layer.
People on stackoverflow would downvote you into oblivion if you were to say that validation attributes aren't needed and can be omitted.
My gut feeling is that the "bug" you fixed in the wrappers wasn't a bug at all but intended behavior, since it did render before, but in another telerik-only html attribute so the control itself could do it's own length checking and not rely on built in browser features.
I fail to see any reason why anyone would put a higher maxlength requirement on their properties than their mask's length. Doing that kind of defeats the purpose of the mask in the first place. You'd be contradicting yourself when you'd say "Oh, my field needs to have a length of 5 and can only contain numbers" and then put a length validation on it that's greater than 5. Let's say for argument sake you were to use a maskedtextbox to enter localized phone numbers. Atleast 1 mask would have the same length as your database field (and thus validation attribute) in that case, while other masks may be smaller. The textbox would stop working at that point.
I'm fine with the input having the new maxlength reinforcement, but then the maskedtextbox itself should be able to process your inputs correctly and not plain stop working when you throw the most basic example at it.
No user is going to want to type their text somewhere and then copy-paste that value inside the maskedtextbox after first having to select everything that's currently inside that textbox. Our users would skin me alive if I were to ask that of them.
Regards
Hello,
Actually, mask property restricts the value by the type of the characters, but also by length. Based on that, there is no need to add max-length attribute in scenario with MaskedTextBox.
If you apply max-length to multiple textboxes, you can update the implementation as apply it conditionally only for plain textbox. You can see an example of this approach here.
In case, this doesn't help, can you elaborate a bit more about your scenario and why is needed to use max-length, when a mask is already applied?
Regards,
Milena
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/.
Hello Milena
Just so we're clear, you're saying that the fact that the MaskedTextBox straight up doesn't work anymore as soon as you use a MaxLength attribute on your property is intended behaviour?
Please give us an example on how we should use this "new intended functionality" then, because the only way we're getting this to work again is by straight up removing our validation attributes...
We're using the TextBox for data that always has a certain length and shape, so our mask's length will always be as long as our StringLength's min/max length.
Regards
Hello,
Indeed, it was a bug in AspNet.Core wrappers that maxlength attribute didn't render, but it is resolved in our latest release and now maxlength should work consistent in the both suites.
Regards,
Milena
Progress Telerik
Hello Milena
While this may be true for the jquery version of the library, it is (partially) incorrect for the core MVC version.
This is the HTML it generates for the 2022.2.802 version of the library:
<span class="k-input k-maskedtextbox k-input-solid k-input-sm k-rounded-md" style="width: 100%;">
<input data-val="true" data-val-length="Aangiftenummer mag maximaal 16 karakters bevatten!" data-val-length-max="16" data-val-regex="Aangiftenummer moet formaat xxx-xxxxxxx-xx-x hebben!" data-val-regex-pattern="^([0-9a-zA-Z]){3}-([0-9a-zA-Z]){7}-([0-9a-zA-Z]){2}-([0-9a-zA-Z]){1}$" id="WharfNotificationDetails_RszDeclarationNumber" maxlength="16" name="WharfNotificationDetails_RszDeclarationNumber" style="width:100%;" type="text" value="" data-role="maskedtextbox" class="k-input-inner" autocomplete="off" aria-placeholder="AAA-AAAAAAA-AA-A">
<span class="k-input-validation-icon k-icon k-i-warning k-hidden"></span>
</span>
<span class="k-input k-maskedtextbox k-input-solid k-input-sm k-rounded-md k-valid" style="width: 100%;">
<input data-val="true" data-val-length="Aangiftenummer mag maximaal 16 karakters bevatten!" data-val-length-max="16" data-val-regex="Aangiftenummer moet formaat xxx-xxxxxxx-xx-x hebben!" data-val-regex-pattern="^([0-9a-zA-Z]){3}-([0-9a-zA-Z]){7}-([0-9a-zA-Z]){2}-([0-9a-zA-Z]){1}$" id="WharfNotificationDetails_RszDeclarationNumber" name="WharfNotificationDetails_RszDeclarationNumber" style="width:100%;" type="text" value="" data-role="maskedtextbox" class="k-input-inner" autocomplete="off" aria-placeholder="AAA-AAAAAAA-AA-A">
<span class="k-input-validation-icon k-icon k-i-warning k-hidden"></span>
</span>
@(Html.Kendo().MaskedTextBoxFor(m => m.WharfNotificationDetails_RszDeclarationNumber)
.Size(ComponentSize.Small)
.Mask("AAA-AAAAAAA-AA-A")
.HtmlAttributes(new { style = "width:100%;" })
)
public class WharfNotificationDetails {
[Display(Name = "Aangiftenummer")]
[StringLength(16, ErrorMessage = "Aangiftenummer mag maximaal 16 karakters bevatten!")]
[RegularExpression(@"^([0-9a-zA-Z]){3}-([0-9a-zA-Z]){7}-([0-9a-zA-Z]){2}-([0-9a-zA-Z]){1}$", ErrorMessage = "Aangiftenummer moet formaat xxx-xxxxxxx-xx-x hebben!")]
public string WharfNotificationDetails_RszDeclarationNumber { get; set; }
}
Regards
Hello,
This behavior is actually expected. MaskedTextBox implementation has been changed in R2 2017 to work with the input event instead of keypress. Here, you can see your example with 2022.1.119 version, it works in the same way as the current version.
This brings many benefits to users such as:
- the ability to use the widget on all browsers, including mobile windows and android
- the ability to write special characters which require several keypresses
- paste content
The Kendo UI MaskdTextBox maxlength attribute is correct, but the browser sees the mask as an already filled in maxlength "_____" and enforces its maxlength validation. You can see the way it works if you select one of the underscores and type a letter.
Regards,
Milena
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.