Material Design + Flask-wtf form values are None since mwc-textfield has name

Question

I'm using bootstrap5 + Material Design (this template: https://startbootstrap.com/previews/material-admin-pro) and I'm having some trouble with getting data from the forms using flask-wtf.

First, I can't seem to recreate the functionality unless I use this format:

<mwc-textfield class="w-100" label="Password" outlined name="password" id="password" type="password"></mwc-textfield>

When the page is run, mwc-textfield creates a shadow-root which then has the ```input type="password" name="password"``' inside it.

When I submit the form, flask-wtf must be grabbing the first name="password" which is "None" since its from the constructor, not the input.

What am I missing? Do I need to recreate the material form and not use or is there a better way to handle this?

Answer 1

I am one of the creators of the Material Admin Pro theme. This is an issue that was brought up a few times in the past by some of our users which we answered on our feedback repo on GitHub.

The form specific Material Web Components plugins that we are using to style out some of our components in this theme are designed to work with forms, and have all of the basic input capabilities. When using them as plain HTML with no JS library, the input is being hidden by the shadow DOM. We posted a resolution for getting around this here:

https://github.com/StartBootstrap/pro-feedback/issues/25#issuecomment-808302598

Here is an example of using some JavaScript to accomplish this functionality, based on the login form example in material-admin-pro: src/pug/pages/app-auth-login-basic.pug

form
    .mb-4
        mwc-textfield#userName.w-100(label='Username', outlined)
    .mb-4
        mwc-textfield#password.w-100(label='Password', outlined, icontrailing='visibility_off', type='password')
    .d-flex.align-items-center
        mwc-formfield#rememberPassword(label='Remember password')
            mwc-checkbox
    .form-group.d-flex.align-items-center.justify-content-between.mt-4.mb-0
        a.small.fw-500.text-decoration-none(href='app-auth-password-basic.html') Forgot Password?
        a.btn.btn-primary(onclick='submitForm()') Login
        script.
            function submitForm() {
                const userName = document.getElementById('userName').value;
                const password = document.getElementById('password').value;
                const rememberPassword = document.getElementById('rememberPassword').value;
                console.log({
                    userName,
                    password,
                    rememberPassword
                });
                // Do some validation
                // Process, or submit for a new page...
            }

Hopefully this helps alleviate some of the issues you were having with this product.

I am wondering what limitations you found to the SimpleDataTables plugin? We chose this as a non-jQuery dependent alternative to DataTables, which has much more capability. If you had another option for us to check out, it's something we'd love to integrate into the theme!