Floating labels not working

I checked what the Material theme was doing and copied the Material theme front-end.js into the GeneratePress child theme, enqueued the script on functions.php and it works.

Questions: Is the JS file provided by the Material plugin not enough without using the Material theme? Or was it because I have the form in a plugin? Food for thought.

Hi @anoktear

I have just been looking at this and the plugin should have added the front-end.js to the footer in your theme

can you check you are running wp_footer in your child theme?

maybe try loading the parent theme on it own

Paul

Hello @pbearne

It’s a strange behaviour, front-end.js is added to the footer of the child theme using the plugin. However, floating labels won’t work.

If I turn off the plugin and enqueue front-end.js and the quickstart CDN in functions.php of the child theme, then it works fine.

functionmaterial_enqueue_style() {

wp_enqueue_style( 'material-style', 'https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css');

wp_enqueue_script( 'material-script', 'https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js', array(), null, true);

wp_enqueue_script( 'material-front-end', get_stylesheet_directory_uri().'/assets/js/front-end.js', array(), null, true);

}

add_action( 'wp_enqueue_scripts', 'material_enqueue_style' )

Conclusion, floating labels won’t work just by turning on the material plugin. I have this same behaviour in all default WordPress themes. Attention that my form is inside a custom plugin, is this relevant?

Update: Some more tests by using the Material plugin. I added a material form to a page, it works. However, when adding the form to Widgets, it won’t apply the floating labels. So the problem is front-end.js not being applied inside widgets?

Hello @anoktear,

Material plugin doesn’t initiate all the custom labels and only handles the contact form.

Here is the code: https://github.com/material-components/material-design-for-wordpress/blob/501a7d4dc0a412d46b81602d6648e39096a977ca/plugin/assets/src/front-end/contact-form.js#L47-L54

You can add your custom selector in custom JS and initiate, that should work.

Theme handles initializing that, that’s why it works when you inject JS from theme – https://github.com/material-components/material-design-for-wordpress/blob/501a7d4dc0a412d46b81602d6648e39096a977ca/theme/assets/src/front-end/components/textfield.js#L20-L29.

We will check internally and see if we would handle initializing it from plugin if theme isn’t active.

Cheers!
Utkarsh Patel