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?
Plugin Support
Utkarsh
(@utkarshpatel)
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
