Issues with label and md-input type="Number"

[JerichoKain]

Steps to reproduce

1. Start with a md-field with a label and <md-input v-model="num" type="Number">.
2. Make the field an invalid number (e.g. 11.11.11). The md-input's v-model num will be cleared and treated as if there is no value while the inner input element maintains a value
3. Remove focus from the field. Because the v-model has been cleared, the input treats it as empty and shows the label as a placeholder covering the invalid input.

Further inspection shows that the value in the $el.value is maintained, only the v-model is not.

Which browser?

Chrome: 75
Firefox: 66
Vue: ^2.6.10
Vue Material: ^1.0.0-beta11

What is expected?

The v-model value should not be cleared and the label should not cover the input value.

What is actually happening?

The v-model is cleared and the label acts as if there are no values in the the md-field.

Reproduction Link

https://codesandbox.io/s/vue-material-quick-start-l55e4

[Topinaqui]

Hi, I'm working on this issue. As this will be my first contribution to the project, any guidance will be welcome :)

[JerichoKain]

I also duplicated the issue here in development mode so you have use the vue dev tools to inspect: https://jerichokain.github.io/vue-material-input/
from this repo: https://github.com/JerichoKain/vue-material-input

I began to look into it a little more over the weekend, as far as I could tell the issue really is that the model is being cleared, which will trigger the label to cover the value in the input.

In src\components\MdField\MdField.vue I think the stringValue is what is triggering the label to move, which is coming from the MdFieldMixin.js... and here is where I got lost. I think the mixin is trying to use value and localValue to bind with the md-input and the md-field, and maybe something is getting lost there?

[Topinaqui]

The thing getting lost is the value of the input itself, when we update the value of the input to a new invalid value, the input attribute value is cleared in the DOM, so is that empty value that is passed to the framework.

…

________________________________ De: Mark Oelke <notifications@github.com> Enviado: quarta-feira, 10 de julho de 2019 13:57 Para: vuematerial/vue-material Cc: Franklin Oliveira Da Veiga; Manual Assunto: Re: [vuematerial/vue-material] Issues with label and md-input type="Number" (#2092) I also duplicated the issue here in development mode so you have use the vue dev tools to inspect: https://jerichokain.github.io/vue-material-input/ from this repo: https://github.com/JerichoKain/vue-material-input I began to look into it a little more over the weekend, as far as I could tell the issue really is that the model is being cleared, which will trigger the label to cover the value in the input. In src\components\MdField\MdField.vue I think the stringValue is what is triggering the label to move, which is coming from the MdFieldMixin.js... and here is where I got lost. I think the mixin is trying to use value and localValue to bind with the md-input and the md-field, and maybe something is getting lost there? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub<#2092?email_source=notifications&email_token=ABADX3ILCZP2GN3H27GAMV3P6YIJBA5CNFSM4H6NWIBKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODZUC5OI#issuecomment-510144185>, or mute the thread<https://github.com/notifications/unsubscribe-auth/ABADX3IXX6NO2NHVCMQCIS3P6YIJBANCNFSM4H6NWIBA>.

[Topinaqui]

Hi, I created a pull request to solve the problem: #2108