Skip to content

Should I ignore the message: "A component is changing an uncontrolled input to be controlled" #40

Closed
@mikebski

Description

I know the lib does not have controlled inputs, but I get this warning every time I enter text into a text field.

Do I have something mis-configured, or should I just ignore the warning?

import LetsForm from "lets-form/react-mantine";

const form = {
    "$schema": "https://unpkg.com/[email protected]/schemas/react-mantine/form.json",
    "version": 2,
    "layout": "vertical",
    "validationMode": "onSubmit",
    "labelSubmit": {
        "en-US": "Submit",
        "de-AT": "Einreichen",
        "de-CH": "Einreichen",
        "de-DE": "Einreichen",
        "en-GB": "Submit",
        "es-CL": "Entregar",
        "es-ES": "Entregar",
        "es-MX": "Entregar",
        "fr-CA": "Soumettre",
        "fr-FR": "Soumettre",
        "it-IT": "Invia"
    },
    "labelCancel": {
        "en-US": "Cancel",
        "de-AT": "Stornieren",
        "de-CH": "Stornieren",
        "de-DE": "Stornieren",
        "en-GB": "Cancel",
        "es-CL": "Cancelar",
        "es-ES": "Cancelar",
        "es-MX": "Cancelar",
        "fr-CA": "Annuler",
        "fr-FR": "Annuler",
        "it-IT": "Annulla"
    },
    "fields": [
        {
            "component": "input-text",
            "label": {
                "en-US": "Username",
                "en-GB": "Username",
                "fr-CA": "Nom d'utilisateur",
                "fr-FR": "Nom d'utilisateur",
                "de-AT": "Nutzername",
                "de-CH": "Nutzername",
                "de-DE": "Nutzername",
                "es-CL": "Nombre de usuario",
                "es-ES": "Nombre de usuario",
                "es-MX": "Nombre de usuario",
                "it-IT": "Nome utente"
            },
            "name": "username",
            "required": true,
            "validation": {
                "message": {
                    "en-US": "Username is required",
                    "en-GB": "Username is required",
                    "fr-CA": "Nom d'utilisateur est nécessaire",
                    "fr-FR": "Nom d'utilisateur est nécessaire",
                    "de-AT": "Benutzername wird benötigt",
                    "de-CH": "Benutzername wird benötigt",
                    "de-DE": "Benutzername wird benötigt",
                    "es-CL": "Se requiere nombre de usuario",
                    "es-ES": "Se requiere nombre de usuario",
                    "es-MX": "Se requiere nombre de usuario",
                    "it-IT": "è richiesto il nome utente"
                }
            }
        },
        {
            "component": "input-text",
            "label": {
                "en-US": "Password",
                "en-GB": "Password",
                "fr-CA": "Mot de passe",
                "fr-FR": "Mot de passe",
                "de-AT": "Passwort",
                "de-CH": "Passwort",
                "de-DE": "Passwort",
                "es-CL": "Contraseña",
                "es-ES": "Contraseña",
                "es-MX": "Contraseña",
                "it-IT": "Parola d'ordine"
            },
            "name": "password",
            "required": true,
            "validation": {
                "message": {
                    "en-US": "Password is required",
                    "en-GB": "Password is required",
                    "fr-CA": "Mot de passe requis",
                    "fr-FR": "Mot de passe requis",
                    "de-AT": "Passwort wird benötigt",
                    "de-CH": "Passwort wird benötigt",
                    "de-DE": "Passwort wird benötigt",
                    "es-CL": "se requiere contraseña",
                    "es-ES": "se requiere contraseña",
                    "es-MX": "se requiere contraseña",
                    "it-IT": "E 'richiesta la password"
                }
            }
        },
        {
            "component": "two-columns",
            "label": "Field 3",
            "name": "options",
            "leftFields": [
                {
                    "component": "checkbox",
                    "label": {
                        "en-US": "Remember me",
                        "en-GB": "Remember me",
                        "fr-CA": "Souviens-toi de moi",
                        "fr-FR": "Souviens-toi de moi",
                        "de-AT": "Mich erinnern",
                        "de-CH": "Mich erinnern",
                        "de-DE": "Mich erinnern",
                        "es-CL": "Acuérdate de mí",
                        "es-ES": "Acuérdate de mí",
                        "es-MX": "Acuérdate de mí",
                        "it-IT": "Ricordati di me"
                    },
                    "name": "remember"
                }
            ],
            "rightFields": [
                {
                    "component": "placeholder",
                    "name": "field_5",
                    "text": {
                        "en-US": "[Forgot password?](/forgot)",
                        "en-GB": "[Forgot password?](/forgot)",
                        "fr-FR": "[Mot de passe oublié?](/forgot)",
                        "es-CL": "[¿Olvidó la contraseña?](/forgot)",
                        "es-ES": "[¿Olvidó la contraseña?](/forgot)",
                        "es-MX": "[¿Olvidó la contraseña?](/forgot)",
                        "it-IT": "[Password dimenticata?](/forgot)",
                        "de-DE": "[Passwort vergessen?](/forgot)",
                        "de-CH": "[Passwort vergessen?](/forgot)",
                        "de-AT": "[Passwort vergessen?](/forgot)",
                        "fr-CA": "[Mot de passe oublié?](/forgot)"
                    }
                }
            ]
        }
    ],
    "locales": [
        "en-GB",
        "en-US",
        "fr-CA",
        "fr-FR",
        "de-AT",
        "de-CH",
        "de-DE",
        "es-CL",
        "es-ES",
        "es-MX",
        "it-IT"
    ]
};
export function Login() {
    return (<LetsForm
        form={form}
        locale="en-US"
        onSubmit={(values) => {
            // do something
            console.log("form values", values);
        }}
    />)

}

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions