Card with password field and Chrome warning

[nightroman]

Blazorise.Demo does not use forms as such, it uses Card.

I have a "form" using Card with a password field:

    <Card>
        <CardBody>
            <Validations @ref="validations" Mode="ValidationMode.Manual" ValidateOnLoad="false">
                <Field>
                    <FieldLabel>Application client ID and secret</FieldLabel>
                    <Validation Validator="@ValidateClientIdSecret">
                        <TextEdit Placeholder="Two GUID values separated by a space"
                                  @bind-Text="@_model.ClientIdSecret"
                                  Role="TextRole.Password">
                            <Feedback>
                                <ValidationError>Expected two GUID values separated by a space</ValidationError>
                            </Feedback>
                        </TextEdit>
                    </Validation>
                </Field>
            </Validations>
            <Button Color="Color.Primary"
                    Loading="@_loading"
                    Clicked="LoginAsync">
                Login
            </Button>
        </CardBody>
    </Card>

All works fine but Chrome shows the following warning:

[DOM] Password field is not contained in a form: (More info: https://goo.gl/9p2vKq) <input id=​"0HM8JF4VA63O4" type=​"password" class=​"form-control" placeholder=​"Two GUID values separated by a space" _bl_5>​

Questions

1. Should I worry?
2. Should I use a form as Chrome suggests?
3. Is there a way to avoid this warning with Card?

[stsrki]

Nothing to worry about. Just wrap the fields with form and your good.

<Card>
    <CardBody>
        <Form>
            <Validations @ref="validations" Mode="ValidationMode.Manual" ValidateOnLoad="false">
                <Field>
                    <FieldLabel>Application client ID and secret</FieldLabel>
                    <Validation Validator="@ValidateClientIdSecret">
                        <TextEdit Placeholder="Two GUID values separated by a space"
                                  @bind-Text="@_model.ClientIdSecret"
                                  Role="TextRole.Password">
                            <Feedback>
                                <ValidationError>Expected two GUID values separated by a space</ValidationError>
                            </Feedback>
                        </TextEdit>
                    </Validation>
                </Field>
            </Validations>
            <Button Color="Color.Primary"
                    Loading="@_loading"
                    Clicked="LoginAsync">
                Login
            </Button>
        </Form>
    </CardBody>
</Card>

The warning never occurred to me before. Maybe it something from newer Chrome versions.

[nightroman]

@stsrki You probably answered to my original post. Sorry, I corrected it (quickly but not quickly enough).
So I can avoid the warning by autocomplete="off".
The question, is this the right way?

[stsrki]

Yes, setting autocomplete="off" seems to be fine from what I can see by quick googling.

[nightroman]

Thank you. Last question, probably dumb (noob). So it is OK (i.e. idiomatic) using these non-component attributes, correct?

[stsrki]

Yep, perfectly fine. That's why there is [Parameter( CaptureUnmatchedValues = true )] public Dictionary<string, object> Attributes { get; set; } implementation in our base component class. It is used to get any custom attribute and apply it to the DOM element.

[nightroman]

Perfect, thank you so much for your help and time!