[Bug] Text boxes placeholder not getting removed once fields filled

[MatinDeWet]

Version

3.0.3

Reproduction link

https://demos.creative-tim.com/material-dashboard-pro/pages/authentication/signin/basic.html

Operating System

Win 10

Device

Desktop

Browser & Version

Chrome - 99.0.4844.51

Steps to reproduce

1. Visit: https://demos.creative-tim.com/material-dashboard-pro/pages/authentication/signin/basic.html
2. Fill input fields partially

   What is expected?

   • Placeholders of input fields to be removed once fields start to be filled

     What is actually happening?

   • Placeholders of input fields not getting removed, the text of fields not readable

---

Solution

Additional comments

[rarestoma]

Hi @MatinDeWet,

Thank you for working with our products.

Can you please give me the code that you tried so I can test it and see what happens?

I tested it on the live demo (https://demos.creative-tim.com/material-dashboard-pro/pages/authentication/signin/basic.html) and it works fine on my side.

Can you please also tell me what browser are you using? If you open the console, are there any errors?

Best regards, Rares

[MatinDeWet]

Hi @rarestoma , I tested this on your live site. I have bought the product. and works amazing just having this problem. I will upload the error I am getting. I am using google chrome - Version 99.0.4844.51 (Official Build) (64-bit)

[andresen007]

I have a similar problem when data is load to a "edit" page. The label float dont work. I use laravel-livewire and the bug is in chrome/safari.

[rarestoma]

Hi @MatinDeWet,

I just found the problem, it comes from the perfectscrollbar tries to initialize the fixed plugin but this component doesn't exist in this page.

The fix is to add this condition on assets/js/material-dashboard.js, starting with line 19:

  if(fixedplugin){
    var ps2 = new PerfectScrollbar(fixedplugin);
  }

Please let me know if it works.

Best regards, Rares

[rarestoma]

Hi @andresen007,

Thank you for working with our products.

Can you please try the solution above?

Thank you, Rares

[MatinDeWet]

@rarestoma , Thank you for your help seems to have done the trick! I also had to create a new min file with the changes.

[andresen007]

Hallo

I got the time to test the fix now, but I can't get it to work.

www.beta.talmatematik.nu

Try to login with wrong password. The email "label" is not floating. And the label still dont float when data is load to a "edit" page.

Best, Søren

[MatinDeWet]

Hi would you show your code for the fields, and also the JS in assets/js/material-dashboard.js line 19. please send a screenshot of both.

[andresen007]

JS-file:

Input - Edit page (livewire):

Input - Login page (standard):

Thank you for your support.

Best, Søren

[andresen007]

Do you have any suggestions?

Best, Søren

[MatinDeWet]

Hi, sorry for the late reply, work just has been hectic this week. The application that I am making with this template is just personal. I had a similar problem that you had in a manner, but mine would stay floating even is if was provided with an empty string. The JS basing the floating attribute on the value attribute if it is there or just an empty value.

I made a change to the JS to look if the value attribute actually has a value in it, not just an empty string, maybe try this?

I don't know what you are using to develop, but make sure your field is being filled before page load.

[andresen007]

Hey

It is completely alright. I'm just hoping to get a solution to the problem. The change you suggest, dont work. I get the following error in the console:

I use Laravel and Livewire. But the login page is only Laravel-blade code.

Thank you for your support, I really hope we find a solution.

Best, Søren