1. Home
  2. Forum
  3. Blazor
  4. Issue with Combobox popup

Issue with Combobox popup

Hi,

I just updated to the current controls (18.3.0.35) and I think something is broken with the combo box.

i just implemented the example listed below

https://blazor.syncfusion.com/documentation/combobox/data-binding/

and every time I down arrow button (to show the combo box list), the list shows very briefly, then closes the popup immediately.

Regards,
Jeremy
 

13 Replies 1 reply marked as answer
SP Sureshkumar P Syncfusion Team October 5, 2020 11:01 AM UTC

Hi Jeremy, 
 
Greetings from Syncfusion support. 
 
Based on your shared information, we suspect that you have missed to add the TValue and TItem in the SfComboBox and ComboBoxEvents component(tag) definitions. We suggest you ensure the same TValue and TItem type to resolve the issue. 
 
Please find the code example. 
<SfComboBox TValue="string" TItem="Countries" Placeholder="e.g. Australia" Value="@ComboVal" DataSource="@Country"> 
    <ComboBoxEvents TValue="string" TItem="Countries" ValueChange="onChange"></ComboBoxEvents> 
    <ComboBoxFieldSettings Value="Name"></ComboBoxFieldSettings> 
</SfComboBox> 
 
@code { 
 
    public string ComboVal = "Austarila"; 
 
    public class Countries 
    { 
        public string Name { get; set; } 
 
        public string Code { get; set; } 
    } 
 
    List<Countries> Country = new List<Countries> 
{ 
        new Countries() { Name = "Australia", Code = "AU" }, 
        new Countries() { Name = "Bermuda", Code = "BM" }, 
        new Countries() { Name = "Canada", Code = "CA" }, 
        new Countries() { Name = "Cameroon", Code = "CM" }, 
    }; 
    private void onChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, Countries> args) 
    { 
        ComboVal = args.Value; 
        StateHasChanged(); 
    } 
} 
 
 
To know more about our current breaking changes. Please refer the below release notes. 
 
 
We have prepared the sample based on your requirement. please find the sample here: https://www.syncfusion.com/downloads/support/forum/158357/ze/ComboBox2319683  
 
Regards, 
Sureshkumar P 
 


Marked as answer
JE Jeremy October 5, 2020 11:13 AM UTC

HI Sureshkumar,

thanks, that seems to work, however

"we suspect that you have missed to add the TValue and TItem"

The syncfusion documentation shows the following code 
<SfComboBox Placeholder="e.g. Australia" Value="@ComboVal" DataSource="@Country">
    <ComboBoxEvents TValue="string" ValueChange="onChange"></ComboBoxEvents>
    <ComboBoxFieldSettings Value="Name"></ComboBoxFieldSettings>
</SfComboBox>

so it's not that I missed it, I just followed the online documentation that appears to be out-of-date.

When is the online documentation going to be updated (as this is the second time that I found the documentation is out-of-date)?

as as side note, you have mispelt the following
 public string ComboVal = "Austarila"; 

Thanks,
Jeremy





SP Sureshkumar P Syncfusion Team October 6, 2020 06:45 AM UTC

Hi Jeremy, 
 
Sorry for the inconvenience caused. 
 
We will correct our documentation and let you know once the documentation has been published. We appreciate your patience. 
 
Regards, 
Sureshkumar P 


JC Joan Carles Ferran October 13, 2020 08:07 AM UTC

Hi, 

we have Syncfusion Blazor 18.3.0.40 and the combobox is still not working, the popup closes immediately as Jeremy said.

We have copied this example from you:

<SfComboBox TValue="string" TItem="Countries" Placeholder="e.g. Australia" Value="@ComboVal" DataSource="@Country">
<ComboBoxEvents TValue="string" TItem="Countries" ValueChange="onChange"></ComboBoxEvents>
<ComboBoxFieldSettings Value="Name"></ComboBoxFieldSettings>
          </SfComboBox>
 
@code { 
 
    public string ComboVal = "Australia"; 
 
    public class Countries 
    { 
        public string Name { get; set; } 
 
        public string Code { get; set; } 
    } 
 
    List<Countries> Country = new List<Countries> 
{ 
        new Countries() { Name = "Australia", Code = "AU" }, 
        new Countries() { Name = "Bermuda", Code = "BM" }, 
        new Countries() { Name = "Canada", Code = "CA" }, 
        new Countries() { Name = "Cameroon", Code = "CM" }, 
    }; 
    private void onChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, Countries> args) 
    { 
        ComboVal = args.Value; 
        StateHasChanged(); 
    } 
} 
  

SP Sureshkumar P Syncfusion Team October 14, 2020 04:10 AM UTC

Hi Joan, 
 
Thanks for your update. 
 
Based on your shared code example. We have created the sample and we cannot able to replicate the issue from our end. also, we suggest you to use two way binding instead of update the value variable inside the change event.  
 
Please find the modified code example here: 
<SfComboBox TValue="string" TItem="Countries" Placeholder="e.g. Australia" @bind-Value="@ComboVal" DataSource="@Country"> 
    <ComboBoxEvents TValue="string" TItem="Countries" ValueChange="onChange"></ComboBoxEvents> 
    <ComboBoxFieldSettings Value="Name"></ComboBoxFieldSettings> 
</SfComboBox> 
 
@code { 
 
    public string ComboVal = "Australia"; 
 
    public class Countries 
    { 
        public string Name { get; set; } 
 
        public string Code { get; set; } 
    } 
 
    List<Countries> Country = new List<Countries> 
{ 
        new Countries() { Name = "Australia", Code = "AU" }, 
        new Countries() { Name = "Bermuda", Code = "BM" }, 
        new Countries() { Name = "Canada", Code = "CA" }, 
        new Countries() { Name = "Cameroon", Code = "CM" }, 
    }; 
    private void onChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, Countries> args) 
    { 
        //ComboVal = args.Value; 
        //StateHasChanged(); 
    } 
} 
 
 
 
 
Regards, 
Sureshkumar P 


JC Joan Carles Ferran October 14, 2020 06:34 AM UTC

Hi, 

Thanks for the answer.

I changed the code exactly like yours and it did not work either.

I attached a short video to show you the problem. 

When I click on the arrow button to show the list it closes immediatelly, only works if I write some text in the textbox but not the arrow button.


Best regards,

Attachment: 20201014_082848_278e0e1a.rar

JE Jeremy October 15, 2020 10:40 AM UTC

"we suggest you to use two way binding instead of update the value variable inside the change event."

Why do you suggest this? In previous versions "dynamic" binding was one of the suggested mechanisms, but it appears that the documentation has now been updated an only recommends "2-way" binding using bind-Value or bind-Index.

Does that mean using the ValueChange function is now deprecated?

SP Sureshkumar P Syncfusion Team October 15, 2020 12:27 PM UTC

Hi Joan, 
 
Thanks for your update.  
 
The popup open issue is our known issue from client-side application. Please confirm your application is whether server side or client side.  
 
And we are glad to announce that our Patch release V18.3.41 has been rolled out. We thank you for your support and appreciate your patience in waiting for this release. The fix for the reported issue (client side) is included in the above release, kindly upgrade the Nuget to latest version.      
   
   
   
Please get in touch with us if you would require any further assistance.      
 
Regards, 
Sureshkumar P 


JC Joan Carles Ferran October 15, 2020 02:09 PM UTC

Hi,

This is a webassembly application, so we are updated the nuget pkg and we confirm you that it finally works as expected now!!

Where can we find the releae notes for this 0.41 version? To check other component changes


Thank you very much for your support :)



PO Prince Oliver Syncfusion Team October 16, 2020 12:50 PM UTC

Hi Joan, 

Thank you for your update. Please find the release notes for version 18.3.0.41, in the following link 

Regards, 
Prince 


JE Jeremy October 20, 2020 10:00 PM UTC

Hi,
just wondering if there is any update on my question in this thread posted on October 15 please?
Thanks

PO Prince Oliver Syncfusion Team October 21, 2020 07:10 AM UTC

Hi Jeremy, 

Sorry for the delay. The Bind-Value automatically updates the variable bound to the value property internally because of two-way binding and hence, it is the recommended way. This avoid additional event binding code and works for most requirements. Using value property and ValueChange is also support and it is not depreciated. You can always bind valueChange event and update the variable bound to value property in the event. Since it will not updated automatically. 

Let us know if you have any  further queries. 

Regards, 
Prince 


JE Jeremy October 22, 2020 11:08 AM UTC

Thanks for the information Prince.

Loader.
Up arrow icon