search

Daemonite / material

Material Design for Bootstrap 4
http://daemonite.github.io/material/
MIT License
3.2k stars 720 forks source link

Value changed with javascript - Issue with floating label #215

Closed kushal9291 closed 4 years ago

kushal9291 commented 5 years ago

Hi, I have web application in which form values are changed through JavaScript. When the value is changed with JS, floating label doesn't work. As it's an existing application I can't trigger function for floating label when a value is changed with JavaScript. so to get around this issue I did this.

 setInterval(function(){
        $('.floating-label .custom-select, .floating-label .form-control').floatinglabel();
    },100);

I want to know if it will lead to any performance issue or not. Thanks

bronthulke commented 5 years ago

I'm having this issue, as well.

Can someone confirm if there is a fix available for this, please?

MROALI commented 5 years ago

Try to add the "has-value" class to the parent of the input.

mikemccaughan commented 4 years ago

Negligible, almost no performance hit, as the code checks to see if the plugin is already attached to the element and doesn't attach another if present. Calling the plugin again triggers the change event on the controls, so you could also just call $('.floating-label .custom-select, .floating-label .form-control').trigger('change'); with the same effect.

sesemaya commented 4 years ago

Hi all,

I don't think there is a "perfect" solution if you cannot trigger the change event when the value is changed (e.g. if you cannot modify the code of an existing application). However running .floatinglabel() every 100ms should not cause you major problems. Alternatively, you can also manually trigger change event as @mikemccaughan pointed out.

In the future, we are looking at getting rid of JavaScript dependency for floating label component using :placeholder-shown (https://drafts.csswg.org/selectors-4/#placeholder). However this is still a working draft. Current browser support is here.