Autocomplete=Off in SFTextbox Type=Password does not work

[Joan Carles Ferran]

Hi, 

I have the latest version 18.3.0.41 from today.

I used SFTextbox as Input type with Autocomplete = Off in some pages and it works as expected. EDIT: If I login with the username, the SFTextbox already autocomplete the text with the username in all the pages I use this textbox

I also used SFTextbox as Password type with Autocomplete = Off inside a modal dialog in 3 SFTextbox to change the user password. 

The problem is that, when opening this dialog, the first SFTextbox is automatically autocompleted with the password previously used to login.

This is a part of the code of this dialog:

<SfDialog @bind-Visible="@IsVisible" Header="@Header" AllowDragging="true" CloseOnEscape="false" ShowCloseIcon="true" IsModal="true" Width="400" Height="475">

<DialogTemplates>

<Content>

<div class="d-flex flex-column flex-lg-row flex-column-fluid ">

<div class="flex-row-fluid d-flex flex-column justify-content-center position-relative overflow-hidden p-7 mx-auto">

<div class="d-flex flex-column-fluid flex-center">

                        <div class="d-flex align-items-start flex-wrap flex-column mr-2 mb-2">

                            <span class="font-weight-bold mb-2 mr-5 mt-3 text-dark">@LanguageManager.Users_OldPassword</span>

                            <SfTextBox Value="@(OldPassword)" Placeholder="@LanguageManager.Users_OldPassword" Width="250px" Input="OnInputOldPassword" Type="InputType.Password" Autocomplete="AutoComplete.Off" />

                            <span class="font-weight-bold mb-2 mr-5 mt-3 text-dark">@LanguageManager.Users_ConfirmOldPassword</span>

                            <SfTextBox Value="@(ConfirmOldPassword)" Placeholder="@LanguageManager.Users_ConfirmOldPassword" Width="250px" CssClass="@CssClass" Input="OnInputConfirmOldPassword" Type="InputType.Password" Autocomplete="AutoComplete.Off" />

                            @if (!String.IsNullOrEmpty(CssClass))

                            {

                                if (CssClass.Equals("e-error"))

                                {

                                    <span class="mr-5 mt-2" style="color:red;font-size: 0.75rem;">@LanguageManager.Users_PasswordDidntMatch</span>

                                }

                            }

                            <span class="font-weight-bold mb-2 mr-5 mt-3 text-dark">@LanguageManager.Users_NewPassword</span>

                            <SfTextBox Value="@(NewPassword)" Placeholder="@LanguageManager.Users_NewPassword" Width="250px" Input="OnInputNewPassword" Type="InputType.Password" Autocomplete="AutoComplete.Off" />

                        </div>

</div>

</div>

</div>

</Content>

<FooterTemplate>

<SfButton Content="@LanguageManager.Buttons_Cancel" CssClass="contextMenuButton closeContextButton" OnClick="@CloseDialog" />

<SfProgressButton Content="@LanguageManager.Buttons_Save" CssClass="contextMenuButton saveContextButton" IconCss="contextmenu-icons Save" IconPosition="IconPosition.Left" @ref="SaveButton" Disabled="@(!_CanSave)" Duration="50000">

<ProgressButtonSpinSettings Width="18" Position="SpinPosition.Right"></ProgressButtonSpinSettings>

<ProgressButtonEvents OnBegin="OnBeginSave"></ProgressButtonEvents>

</SfProgressButton>

</FooterTemplate>

</DialogTemplates>

</SfDialog>

@code {

    #region Variables

    [Parameter]

    public string Header { get; set; } = "";

    private string OldPassword { get; set; } = "";

    private string ConfirmOldPassword { get; set; } = "";

    private string NewPassword { get; set; } = "";

    private bool IsVisible { get; set; } = false;

    private bool _CanSave = false;

    private bool _SaveRequested = false;

    private string CssClass;

    private SfProgressButton SaveButton;

    #endregion

    protected override async Task OnInitializedAsync()

    {

        _SaveRequested = false;

        OldPassword = "";

        ConfirmOldPassword = "";

        NewPassword = "";

    }

    protected override async Task OnAfterRenderAsync(bool firstRender)

    {

        if (firstRender)

        {

            _SaveRequested = false;

            OldPassword = "";

            ConfirmOldPassword = "";

            NewPassword = "";

        }

    }

....

more insignifigant code to this behaviour

....

Do you have any idea why it happens?

Thank you in advance. 

Best regards

[Ponmani Murugaiyan]

Hi Joan, 

Thanks for contacting Syncfusion support. 

We have checked your reported query. We would like to inform you that, when the TextBox AutoComplete is Off then the dropdown is not shown for suggestion. This scenario is working as expected inside  and outside of the dialog in our end. We have prepared sample based on your provided code snippet and also attached the ensured sample for your reference. 

<SfDialog @ref="DialogObj" @bind-Visible="@IsVisible" Header="@Header" AllowDragging="true" CloseOnEscape="false" ShowCloseIcon="true" IsModal="true" Width="400" Height="475"> 

        <DialogTemplates> 

            <Header> <div style="text-align: center;">Create Password</div> </Header> 

            <Content> 

                <SfTextBox Value="@(OldPassword)" Placeholder="OldPassword" Width="250px" Type="InputType.Password" Autocomplete="AutoComplete.Off" /> 

                <br /> 

                <SfTextBox Value="@(ConfirmOldPassword)" Placeholder="ConfirmOldPassword" Width="250px" Type="InputType.Password" Autocomplete="AutoComplete.Off"/> 

                <br /> 

                <SfTextBox Value="@(NewPassword)" Placeholder="Users_NewPassword" Width="250px" Type="InputType.Password" Autocomplete="AutoComplete.Off"/> 

                <br /> 

            </Content> 

        </DialogTemplates> 

    </SfDialog> 

Output: 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Blazor_Textbox-229092649  

 

Kindly check with the above sample. If issue still exists in your end or if we misunderstood the query please provide the below details to ensure further at our end. 

1. Provide video demonstration for exact scenario.
2. Is issue reproduced with the above provided sample. If so revert us with the replication procedure.
3. Whether issue occurred after upgrading to mentioned version.
4. If possible try to replicate with the sample.

The above requested details will helps us to provide you the solution at earliest. 

Regards, 

Ponmani M 

[Joan Carles Ferran]

Hi,

Thanks for the answer.

I tested your sample and it works fine. But our application is a Webassembly application, so maybe the behaviour is different.

I recorded a video to show you our problems with the textbox, in Password and Text input types, so you can see the problem in the login screen and in the change password screen as I mentioned.

Thank you in advance.

Best regards,

Attachment: 20201016_155248_56e45760.rar

[Joan Carles Ferran]

Hi,

Something new?

[Ponmani Murugaiyan]

Hi Joan, 

Thanks for your patience. 

We have checked the same piece of code in the Webassembly application. But unfortunately the issue not replicates in our end. Hear we have attached the ensured sample. 

WebAssembly application:  https://www.syncfusion.com/downloads/support/directtrac/general/ze/Textbox_WASM1883430019  

 

Kindly check with the above sample. If issue still exists in your end, please try to replicate the issue in the above provided sample to check and update the solution at our end. 

Regards, 

Ponmani M 

[Joan Carles Ferran]

Hi,

Thanks for your answer.

I tested your sample and it works fine, the component in our app works in the same way.... But,

The real problem is, when you have previously logged in into the app and the browser remembers the username and the password.

In this scenario all the textboxes with Autocomplete = Off inside the app do not work as expected, as I showed you in the previous video.

Best regards,

[Joan Carles Ferran]

Hi,

Any news about that?

[Ponmani Murugaiyan]

Hi Joan, 

Sorry for the inconvenience caused. 

Unfortunately the reported issue is not replicated in our end, we have ensured with the previously provided sample and also the Autocomplete property is disabled. We request you to provide the issue reproducing sample which helps us to provide you the solution at earliest. In the meantime we will check with the provided information in our end and get back to you. 

Regards, 

Ponmani M  

[Vadim]

Hello,

Today I faced with the same issue in the Google Chrome version 88.0.4324.182  64bit Windows 10. 

Probably this issue belongs to browser Google Chrome:

https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#preventing_autofilling_with_autocompletenew-password

https://stackoverflow.com/questions/12374442/chrome-ignores-autocomplete-off

https://stackoverflow.com/questions/59991469/chrome-firefox-autocomplete-new-password-not-working

I tried several suggestions like autocomplete="new-password" and invisible fake fields without result.

My version of Microsoft Edge does not work with blazor app, so I cannot test my app there.

Best regards,

Vadim.

[Sureshkumar P]

Hi Joan, 

 

Also, please tryout the above-mentioned solution and revert us if you have facing the issue again with provide the issue reproducing sample which helps us to provide you the solution at earliest. 

 

Regards, 

Sureshkumar P 

[Ross]

I am seeing the exact same behaviour.  Autocomplete="AutoComplete.Off" does not help.

I wonder if your sample is a real world application.  Perhaps chrome tries to be clever by detecting the label and/or placeholder which aren't present in your sample.

Here is my example.

  <Field Horizontal="true">

                        <FieldLabel ColumnSize="ColumnSize.Is4.OnDesktop">Email</FieldLabel>

                        <FieldBody ColumnSize="ColumnSize.Is6.OnDesktop">

                            <SfTextBox Placeholder="Enter Email Address" disabled="@(!ViewModel.SelectedUser.IsNew)" Autocomplete="AutoComplete.Off"

                                       Type="InputType.Email" @bind-Value="@ViewModel.SelectedUser.Email"/>

                            <ValidationMessage For="@(() => ViewModel.SelectedUser.Email)"></ValidationMessage>

                        </FieldBody>

                    </Field>

[Ponmani Murugaiyan]

Hi Ross, 

Thanks for the update. 

We tried to replicate the issue which you mentioned but unfortunately we could not. We would like to know you that SfTextBox functions based on the native input behavior. Therefore, kindly ensure if the same issue can be seen in native input as we could not replicate it. We also suggest you to ensure by clearing browser cache once from your end. 

Regards, 

Ponmani M 

[MS]

Just ran into this issue, chrome does not understand autocomplete="off".

To workaround the issue you can set the following:

InputAttributes="new Dictionary<string, object>() { { "autocomplete", "new-password" } }"

[Deepak Ramakrishnan]

Hi MiVision, 

 

Thanks for taking time and  sharing us your solution .  

 

Thanks, 

Deepak R.