Multiple listbox same page not working

[André Karam Soares]

Hello,

I'm running syncfusion blazor 18.3.0.40

I have a page that has multiple listbox items. 

This list boxes are connected by scope in pairs ListBox1 is connected to Listbox3 and Listbox2 is connected to ListBox4 where i can drag and drop elements.

My problem is sometimes randomly the drag and drop in one listbox does not work. The non working list box is random, sometimes is listbox1 sometimes is listbox2 so on so on.

One clear error I can see is that the html generated (ul element) for the non working listbox is clearly different from the others.

Working listbox

<ul class="e-list-parent e-ul e-lib e-sortable e-draggable" role="presentation" style="flex: 1; overflow: auto;" id="sortable_1"><li class="e-list-nrt">No records found</li></ul>

Not working listbox

<ul class="e-list-parent e-ul" role="presentation" style="flex: 1; overflow: auto;"><li class="e-list-nrt">No records found</li></ul>

<div class="row" style="margin-bottom:30px">
    <div class="col-6">
        <h6>@OrdersBeforeRangeLabel()</h6>
        <SfListBox ID="orderByBeforeRange"
                   @ref="_orderByBeforeRange"
                   DataSource="@_activePrioritySettingsBeforeRange"
                   Scope="@_orderPropertiesBeforeRange"
                   TItem="DistributionListPrioritySettingViewModel"
                   AllowDragAndDrop="true"
                   Height="200px"
                   TValue="string[]">
            <ListBoxFieldSettings Text="Name" Value="Code" />
            <ListBoxEvents Created="Created" TValue="string[]" TItem="DistributionListPrioritySettingViewModel" />
            <ListBoxTemplates TItem="DistributionListPrioritySettingViewModel">
                <ItemTemplate>
                    @{
                        var data = (context as DistributionListPrioritySettingViewModel);
                        <div class="row">
                            <div class="col-8">
                                <span>@data.Name</span>
                            </div>
                            @if (data.SortOptions.Any())
                            {
                                <div class="col-4" style="top:-4px;">
                                    <select class="custom-select-sm wms-button" style="float:right;width:140px;" value="@data.SelectedSortOptions;@data.Code" @onchange="ValueChangeHandlerOrberByBeforeRange">
                                        @foreach (var sortOptions in data.SortOptions)
                                        {
                                            <option value="@sortOptions.Value;@data.Code">@sortOptions.Text</option>
                                        }
                                    </select>
                                </div>
                            }
                        </div>
                    }
                </ItemTemplate>
            </ListBoxTemplates>
        </SfListBox>
    </div>
    <div class="col-6">
        <h6>@OrdersAfterRangeLabel()</h6>
        <SfListBox ID="orderByAfterRange"
                   @ref="_orderByAfterRange"
                   DataSource="@_activePrioritySettingsAfterRange"
                   Scope="@_orderPropertiesAfterRange"
                   TItem="DistributionListPrioritySettingViewModel"
                   AllowDragAndDrop="true"
                   Height="200px"
                   TValue="string[]">
            <ListBoxFieldSettings Text="Name" Value="Code" />
            <ListBoxEvents Created="Created" TValue="string[]" TItem="DistributionListPrioritySettingViewModel" />
            <ListBoxTemplates TItem="DistributionListPrioritySettingViewModel">
                <ItemTemplate>
                    @{
                        var data = (context as DistributionListPrioritySettingViewModel);
                        <div class="row">
                            <div class="col-8">
                                <span>@data.Name</span>
                            </div>
                            @if (data.SortOptions.Any())
                            {
                                <div class="col-4" style="top:-4px;">
                                    <select class="custom-select-sm wms-button" style="float:right;width:140px;" value="@data.SelectedSortOptions;@data.Code" @onchange="ValueChangeHandlerOrderByAfterRange">
                                        @foreach (var sortOptions in data.SortOptions)
                                        {
                                            <option value="@sortOptions.Value;@data.Code">@sortOptions.Text</option>
                                        }
                                    </select>
                                </div>
                            }
                        </div>
                    }
                </ItemTemplate>
            </ListBoxTemplates>
        </SfListBox>
    </div>
</div>
<div class="row" style="margin-bottom:30px">
    <div class="col-6">
        <SfListBox ID="orderPropertiesBeforeRange" @ref="@_orderPropertiesBeforeRange" DataSource="@_selectablePrioritySettingsBeforeRange" Scope="@_orderByBeforeRange" TItem="DistributionListPrioritySettingViewModel" AllowDragAndDrop="true" Height="200px" TValue="string[]">
            <ListBoxFieldSettings Text="Name" Value="Code" />
            <ListBoxEvents Created="Created" TValue="string[]" TItem="DistributionListPrioritySettingViewModel" />
        </SfListBox>
    </div>
    <div class="col-6">
        <SfListBox ID="orderPropertiesAfterRange" @ref="@_orderPropertiesAfterRange" DataSource="@_selectablePrioritySettingsAfterRange" Scope="@_orderByAfterRange" TItem="DistributionListPrioritySettingViewModel" AllowDragAndDrop="true" Height="200px" TValue="string[]">
            <ListBoxFieldSettings Text="Name" Value="Code" />
            <ListBoxEvents Created="Created" TValue="string[]" TItem="DistributionListPrioritySettingViewModel" />
        </SfListBox>
    </div>
</div>

Any ideas why this is happening? 

[Thaneegairaj Sankar]

Hi Andre,

We can able to replicate the issue in our end and we need to validate more on your requirement So, we will update you the further details on May 2nd, 2022.

Regards,

Thaneegairaj S

[YuvanShankar Arunagiri]

Hi Andre,

We can reproduce your reported issue at our end. So, we have confirmed this as an issue and logged a bug report for this. You can track its status from the below feedback link. 

Feedback Link: https://www.syncfusion.com/feedback/34613/drag-and-drog-not-working-properly-while-using-item-template-in-listbox

The fix will be available in our upcoming patch release which is scheduled for May 18th, 2022.

Regards,

YuvanShankar A

[YuvanShankar Arunagiri]

Hi Andre,

We are sorry for the inconvenience. The issue is due to some technical glitches at our end. We will resolve this in our upcoming patch release, which is scheduled for May 25th,2022. Please use the below custom package until then.

Custom package:  https://www.syncfusion.com/downloads/support/directtrac/general/ze/Syncfusion.Blazor.20.1.0.56-1535924031

Regards,

YuvanShankar A

[YuvanShankar Arunagiri]

Hi Andre,

Thanks for the patience.

We are glad to announce that our weekly patch release (20.1.0.57) is rolled out. We have included the fix for this issue in this release. So, we suggest you upgrade our Syncfusion packages to our latest version to resolve this issue in your end. (20.1.0.57).

Feedback Link:
https://www.syncfusion.com/feedback/34613/drag-and-drog-not-working-properly-while-using-item-template-in-listbox

Please let us know if you need further assistance.

Regards,

YuvanShankar A