Sortable list doesn't allow click and drag/scroll with MAUI Blazor.

[josephroy99]

Describe the bug When using MAUI Blazor, and implementing the scrollable list, it is not possible to drag any of the elements.

To Reproduce Steps to reproduce the behavior:

1. Set up the project as per the getting started documentation.
2. Make sure to include the sortable.js reference in the index.html file.
3. Copy the code section for a simple sortable list into the home page
4. Run and click and drag on an element.
5. The dragging doesn't move the element that was clicked/pressed.

Expected behavior The element that was dragged should follow the mouse.

Screenshots N/A

Versions (please complete the following information):

• .NET Version: .NET 8
• BlazorBootstrap: 3.0.0
• Blazor WebAssembly / Server: MAUI Blazor
• Blazor Interactive Render Mode: MAUI Blazor
• Blazor Interactivity Location: Per Pagew Component

Sample code

@page "/"

<SortableList Class="mb-3"
              Handle=".bb-sortable-list-handle"
              TItem="Employee"
              Data="employees"
              Context="item"
              OnUpdate="@OnEmployeeListUpdate">

    <ItemTemplate>
        <div class="d-flex justify-content-start">
            <div class="bb-sortable-list-handle pe-2"><Icon Name="IconName.GripVertical" /></div>
            <div>@item.Name</div>
        </div>
    </ItemTemplate>

</SortableList>

@code {
    public List<Employee> employees = Enumerable.Range(1, 5).Select(i => new Employee(i, $"Employee {i}")).ToList();

    private void OnEmployeeListUpdate(SortableListEventArgs args)
    {
        var itemToMove = employees[args.OldIndex];

        employees.RemoveAt(args.OldIndex);

        if (args.NewIndex < employees.Count)
            employees.Insert(args.NewIndex, itemToMove);
        else
            employees.Add(itemToMove);
    }

    public record Employee(int Id, string? Name);
}

Desktop (please complete the following information):

• Device: x86 PC
• OS: Windows 11
• Browser: Blazor Web View (Edge?)
• Version: ?

[josephroy99]

To add context, this code was copied from the handle demo, but the code example for the basic demo with no handle also doesn't work.

[cs-mq]

I have the same issue. With Blazor Web App it works fine but in the MAUI blazor there is no functionality.

[cs-mq]

Can anyone provide a statement on whether it is likely that this issue will be resolved in MAUI hybrid in the short term? I would appreciate feedback so that I can plan whether I need to implement a different drag-and-drop function for my lists.

[gvreddy04]

@josephroy99 @cs-mq Thank you for using BlazorBootstrap. Will check and get back to you on this?

[cs-mq]

Can anyone already provide feedback on whether this bug will be fixed in the foreseeable future?