This is a migrated thread and some comments may be shown as answers.

kendo-maskedtextbox changes look after change of data

7 Answers 104 Views
This is a migrated thread and some comments may be shown as answers.
Nelson
Top achievements
Rank 1
Nelson asked on 24 Sep 2018, 06:03 PM

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!

 

 

7 Answers, 1 is accepted

Sort by
0
Neli
Telerik team
answered on 26 Sep 2018, 02:59 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Nelson
Top achievements
Rank 1
answered on 26 Sep 2018, 04:04 PM

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!

0
Neli
Telerik team
answered on 28 Sep 2018, 01:43 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Trevor
Top achievements
Rank 1
answered on 01 Oct 2018, 06:04 PM
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.
0
Neli
Telerik team
answered on 03 Oct 2018, 11:19 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Trevor
Top achievements
Rank 1
answered on 15 Oct 2018, 02:12 PM

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="(999) 000-0000">
</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.

0
Neli
Telerik team
answered on 17 Oct 2018, 11:18 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Asked by
Nelson
Top achievements
Rank 1
Answers by
Neli
Telerik team
Nelson
Top achievements
Rank 1
Trevor
Top achievements
Rank 1
Share this question
or