kendo-maskedtextbox changes look after change of data

[Nelson]

Hi All,

I'm testing the Kendo UI Vue-wrappers and notice an issue with the masked text box. When just loading the page, the input looks fine. But after entering data and exiting the field, the borders go away. First I thought I was doing something wrong, but then I noticed that example page does the same thing:

https://www.telerik.com/kendo-vue-ui/components/inputs/maskedtextbox/

This behavior, does not exists, for example, in the Angular version:

https://www.telerik.com/kendo-angular-ui/components/inputs/maskedtextbox/

is this a bug and if so, where can I report it?

 

Thanks!

 

 

[Neli]

Hello Nelson,

Thank you for pointing out the issue.
I logged it in our official GitHub repository and you can track our progress on it on the following link.
In the meantime while the bug is being fixed, you could set border in the change event handler. Below is an example:

methods: {
onChange (e) {
$('.k-maskedtextbox').css('border', '1px solid #e6e6e6');
}
}

As a small sign of gratitude for reporting a bug I have updated your Telerik points.


Regards,
Neli
Progress Telerik

[Nelson]

Hi Neli,

Thanks for the reply. I noticed that the wrapper tag gets assigned the class .k-textbox (this tag is not there at beginning) and removing that class returns the text-box back to "normal"

Since then I have also discovered another issue but in the numeric input. After modifying the data model, it expand to the full width of the parent container. I haven't check in detail what's causing this, but you can see it here:

https://www.telerik.com/kendo-vue-ui/components/inputs/numerictextbox/

 

Thanks for the points!

[Neli]

Hello Nelson,

Thank you again for reporting an issue. 
In the current issue additional 'k-input' class is applied, similar to the 'k-textbox' in the MaskedTextBox. 
Here you will find a link to the Github repository describing the NumericTextBox problem. 
I have updated your Telerik points as a gratitude for reporting a bug.  

Regards,
Neli
Progress Telerik

[Trevor]

We've seen both of these issues, as well as a related case where selecting an item in a combobox is not only losing a border due to the aforementioned class change, but also setting a CSS class on an unrelated text input immediately prior to the combobox, causing the input's text to shift slightly down and to the right.

[Neli]

Hi Trevor,

I have tested in the Kedno UI for Vue demos, but I did not manage to reproduce the described issue. Could you please send us more information about the example or configuration you are using and the exact steps needed in order to replicate the issue?
On the linked screencast you could see the behavior on my end when selecting an item in ComboBox.

Regards,
Neli
Progress Telerik

[Trevor]

Hello Neli and thank you for the response.  The following should allow you to set up an example that reproduces the issue.  Let me know if you need anything else.

 

You just need a kendo-maskedtextbox, followed by a kendo-autocomplete, such as:

 

<kendo-maskedtextbox title="phone number"
v-model="model.Phone"
mask="[phone]">
</kendo-maskedtextbox>
<kendo-autocomplete v-model="model.Country"
:data-source="['albania', 'belarus']"
:placeholder="'Select country...'"
:separator="', '"
:filter="'contains'">
</kendo-autocomplete>

 

Typing "alb" in the autocomplete and selecting "albania" adds a 'k-textbox' class to the <span> surrounding the masked text box input, which changes the text styling in the masked text box. It also adds a 'k-input' class to the <span> surrounding the autocomplete input, which changes its layout and makes the surrounding border disappear.

[Neli]

Hi Trevor,

Thank you very much for providing additional information. I have tested the behavior of AutoComplete when using v-model and the issue is reproducible. As the problem is similar to issues with the NumericTextBox and MaskedTextBox, I have updated the issues accordingly by adding another scenario. 
Thank you one more time for your effort. 

Regards,
Neli
Progress Telerik