Problem with a number values in SFCombobox with text displayed

I have a problem with a field like SFCombobox in Blazor, which displays text on the display but records the Id in the bank, but if I type a number in the combo input, the field allows me to leave the number after leaving the field, even though the display is just the textual value, causing me to have to validate the invalid value in the form save. Is there a way to not allow entering a number or clearing after leaving the combo? I tried using events like OnChanged but it didn't help, the component is buggy, sometimes it clears and sometimes it doesn't.


code below: 

<SfComboBox

     Enabled=@formEnabled

     ID="category"

     @ref="categoriasCombo"

     TValue="int?"

     TItem="CategoryResponse"

     Placeholder="Enter the category"

     @bind-Value="@_produto.FkCat1Id"

     CssClass="e-multi-column"

     AllowFiltering="true"

     ShowClearButton="true"

     DataSource="@CategoriaList"

     PopupHeight="300px">

     <ComboBoxTemplates TItem="CategoriaResponse">

         <HeaderTemplate>

             <table><tr><th>Description</th></tr></table>

         </HeaderTemplate>

         <ItemTemplate Context="CategoryItemContext">

             <table>

                 <tbody>

                     <tr>

                         <td>@((CategoriaItemContext as CategoryResponse).Descr)</td> // text field

                     </tr>

                 </tbody>

             </table>

         </ItemTemplate>

     </ComboBoxTemplates>

     <ComboBoxFieldSettings Text="Descr" Value="Id" /> //Id value saved in the database

</SfComboBox>

<ValidationMessage For="@(() => _produto.FkCat1Id)" /> // Id passes to this fk when validating in Submit/Save


Attachment: sfcombobox_problems_with_number_in_input_fac80406.rar


1 Reply

PK Priyanka Karthikeyan Syncfusion Team May 17, 2024 10:23 AM UTC

Hi alexandre trapp,

 

Thank you for reaching out to us.

 

To prevent users from entering custom values into the component, you can set AllowCustom to false. This will address the issue you are facing. Below is the code snippet and a sample for your reference.

 

<SfComboBox  AllowCustom="false" ..>

     ...       

</SfComboBox>

 

Sample:https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html#Syncfusion_Blazor_DropDowns_SfComboBox_2_AllowCustom

 

API Reference: https://blazorplayground.syncfusion.com/BtBJNyscUcVBssAH

 

 

 

Regards,

Priyanka K


Loader.
Up arrow icon