search

zdhxiong / mdui

Material Design 3(Material You) UI components using Web Components.
https://www.mdui.org
4.16k stars 363 forks source link

Remove predefined attribute values from components #337

Open myFavShrimp opened 2 months ago

myFavShrimp commented 2 months ago

Hey, first of all thank you for creating this library!

I am working on a larger project where I use MDUI with HTMX. When sending form data to a server with htmx, the submit button adds an empty field without a value to the request. I created a minimal example to reproduce:

<!DOCTYPE HTML>
<html lang="en" class="mdui-theme-dark">
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
    <meta content="width=device-width,initial-scale=1.0" name=viewport>

    <script src="static/external/htmx.js"></script>

    <link rel="stylesheet" href="https://unpkg.com/mdui@2/mdui.css">
    <script src="https://unpkg.com/mdui@2/mdui.global.js"></script>

    <script src="https://unpkg.com/htmx.org@2.0.1"></script>
</head>
<body>
    <!-- fake api that allows all cors traffic -->
    <base href="https://jsonplaceholder.typicode.com">

    <form hx-post="/posts">
        <mdui-top-app-bar-title>
            Title
        </mdui-top-app-bar-title>

        <mdui-text-field label="Username" name="username"></mdui-text-field>
        <mdui-text-field label="Password" name="password"></mdui-text-field>

        <mdui-button type="submit">Login</mdui-button>
    </form>
</body>
</html>

With the above example, here is what the login button looks like in the dom:

image

HTMX sees the name and the value attributes and includes them in the form data (which is expected behavior with htmx).

Here is what the form data looks like with the code above: image

I found an example on the lit.dev playground where the properties of components are defined as optionals. The attributes are not displayed there because they are left undefined by default. On the ButtonBase in MDUI the attributes have a default value which is an empty string. I think attributes in MDUI should be made optional as well as empty string values still have a value (which is a string without any characters) while undefined is, as far as I know, the expected way to mark something optional in JavaScript.

Thanks again for creating MDUI. I hope this can get resolved :slightly_smiling_face:

zdhxiong commented 4 days ago

This should be a bug in htmx:

When the name attribute of a button is not set, the name should be an empty string, not undefined. Therefore, the default value for name should not be set to undefined.

In native HTML, using a submit button like <button type="submit" name="" value="">Submit</button> for submission will not include this empty name in the submitted data. Thus, htmx should filter out empty names to remain consistent with native HTML standards.