Unable to set property 'autocomplete' on object of type 'Syncfusion.Blazor.Inputs.SfTextBox'. The error was: Specified cast is not valid.

[Andrew Simpson]

Syncfusion.Blazor 18.3.0.38

I am trying to use the property autocomplete="doNotAutoComplete" on a SfTextBox

<div class="form-group" style="width: 300px">

<SfTextBox Placeholder="Additional Notes" @bind-Value="scheduleRequest.AdditionNotes" autocomplete="doNotAutoComplete" Multiline="true" FloatLabelType="FloatLabelType.Auto" />

<ValidationMessage For="@(() => scheduleRequest.AdditionNotes)" />

</div>

But I get an error when Chrome tries to render the page.

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]

      Unhandled exception rendering component: Unable to set property 'autocomplete' on object of type 'Syncfusion.Blazor.Inputs.SfTextBox'. The error was: Specified cast is not valid.

System.InvalidOperationException: Unable to set property 'autocomplete' on object of type 'Syncfusion.Blazor.Inputs.SfTextBox'. The error was: Specified cast is not valid. ---> System.InvalidCastException: Specified cast is not valid.

  at Microsoft.AspNetCore.Components.Reflection.MemberAssignment+PropertySetter`2[TTarget,TValue].SetValue (System.Object target, System.Object value) <0x47adc20 + 0x00042> in <filename unknown>:0 

  at Microsoft.AspNetCore.Components.Reflection.ComponentProperties.<SetProperties>g__SetProperty|2_0 (System.Object target, 

...

The goal is I don't want Chrome to try and suggest what should go in the text box.  I also do not want it to store what I am trying to add.

If I remove it from the SfTextBox and only use it on a SfAutoComplete within the exact same page and form it works exactly as intended.  

<div class="form-group" style="width: 300px">

<SfAutoComplete Placeholder="Email Address" autocomplete="doNotAutoComplete" @bind-Value="scheduleRequest.EmployeeEmail" FloatLabelType="FloatLabelType.Auto" TValue="string" TItem="EmployeeData" DataSource="@employees" Autofill=true @onchange="FeEntered">

<AutoCompleteFieldSettings Value="Email"></AutoCompleteFieldSettings>

</SfAutoComplete>

<ValidationMessage For="@(() => scheduleRequest.EmployeeEmail)" />

 </div>

For the SfAutoComplete when I don't have autocomplete="doNotAutoComplete" Chrome list ever email address I have typed in, but when I do have it Chrome does not.  When Chrome does not in the case of the SfAutoComplete it makes the selection process better for the user, so I am glad it is working there

Also, I would like to use it on a SfGrid for my EditMode.Dialog, so it does not to auto complete the items I am trying to edit. 

<SfGrid autocomplete="doNotAutoComplete" @ref="@CurrentScheduleGrid" DataSource="@CurrentSchedules" AllowPaging="false" AllowSelection="true" AllowSorting="true" AllowMultiSorting="false" Toolbar="@(new List<string>() {"Delete","Edit"})">

<GridEditSettings AllowDeleting="true" AllowEditing="true" Mode="EditMode.Dialog"/>

 <GridSelectionSettings Mode="SelectionMode.Row" Type="SelectionType.Single" />

...

[Ponmani Murugaiyan]

Hi Andrew, 

Greetings from Syncfusion support. 

Query1: The goal is I don't want Chrome to try and suggest what should go in the text box.  I also do not want it to store what I am trying to add. 

We have validated your reported query. We would like to inform you that, for sfTextbox we have provided the property called Autocomplete, which specifies whether the browser is allow to automatically enter or select a value for the textbox. By default, autocomplete is enabled for textbox. You can disable autocomplete as like below code snippet. 

<div class="form-group" style="width: 300px"> 

    <SfTextBox Placeholder="Additional Notes" @bind-Value="AdditionNotes" Autocomplete="AutoComplete.Off" Multiline="true" FloatLabelType="FloatLabelType.Auto" /> 

</div> 

 

@code { 

    public string AdditionNotes { get; set; } 

} 

API: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html#Syncfusion_Blazor_Inputs_SfTextBox_Autocomplete  

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Textbox-WASM-1162238853  

 

Query2: Also, I would like to use it on a SfGrid for my EditMode.Dialog, so it does not to auto complete the items I am trying to edit. 

We have analyzed your query and we suspect that you want to disable the autofill options displayed for input box in the Edit Dialog. We suggest you to achieve your requirement using the solution (disable the autofil for entire chrome browser) provided in the below link.    

  

https://support.iclasspro.com/hc/en-us/articles/218569268-How-Do-I-Disable-or-Clear-AutoFill-AutoComplete-Information-      

  

If above solution does not resolve your query or you want to disable autocomplete for particular textbox / editform. Kindly get back to us with more details about the editor control you are using inside the Grid edit dialog.   

Regards, 

Ponmani M 

[Andrew Simpson]

Query1:

Thank you Autocomplete="AutoComplete.Off"  worked perfectly.

Query2:

I think the best thing for me to do now that I know about the answer in query 1 would be to make a custom dialog for my popup.  I am good with that as well.  

Thank you for the help.  

[Ponmani Murugaiyan]

Hi Andrew, 

Thanks for the update. 

We are glad to hear that the provided suggestion helps you in achieving the requirement. Please get back us if you need further assistance. 

Regards, 

Ponmani M