RadzenDialog dragging problem

Radzen.Blazor Components
1

Hi,
I'm having odd problems with RadzenDialog dragging capabilities. When I open a page as a dialog (DailogService.OpenAsync) with Resizable and Draggable dialog options, initially the popup can't be dragged. If I resize it then dragging works, but if I start to drag it faster at some point the popup gets stuck to the mouse pointer and doesn't stop to drag when the mouse button is released.
It seems these dragging problems are related to the razor component that is rendered in the popup dialog, because with simpler ones dragging works as expected. Also on your demo page no such problems, but I'll appreciate any help if some one has an Idea what could be causing the described behavior!
Here is the code of such razor componen, shown in dialog:

<RadzenTemplateForm Data="@ReportingDateData">
    <div class="border-bottom pb-2" style="line-height: 2.5rem; display: flex; align-items: center">
        <RadzenLabel Text="@CommonLocalizer["System date:"]" />
        <RadzenDatePicker @bind-Value=ReportingDateData.SystemDate DateFormat="d" Style="width: 10rem; margin-left: 3px"/>
        <ValidationMessage For="@(() => ReportingDateData.SystemDate)" />
        <RadzenLabel Text="@CommonLocalizer["Source:"]" Style="margin-left: 15px" />
        <RadzenDropDown TValue="SourceType" Data="SourceTypes" @bind-Value="ReportingDateData.SourceType" Style="width: 10rem; margin-left: 3px"/>
    </div>
    <div class="text-center mt-3">
        <RadzenButton ButtonType="ButtonType.Submit" Text="OK" Icon="done" Style="width: 7rem; padding: 0"
                      Click="@((args) => Close(true))" @ref="okButton" />
        <RadzenButton ButtonStyle="ButtonStyle.Secondary" Text="@CommonLocalizer["Cancel"]" Icon="cancel" Style="margin-left: 10px; width: 7rem; padding: 0" 
                      Click="@((args) => Close(false))" />
    </div>
</RadzenTemplateForm>

I searched for similar problems in the forum but didn't find any thing helpful...

2

More to the described problems... As can be checked on the demo page ("Open page as a dialog"), dragging a dialog works on FF but when I downloaded the source code from GitHub and ran the app in debug on Edge, dragging of the dialogs didn't work. Same run in debug on FF and Chrome - dragging works only horizontally.
In the demo site (Blazor Dialog component), when opened on Edge, again dialog can be dragged only horizontally, while on FF and Chrome dragging works as expected.

3

Here is what I see on Edge using the same demo:
dialog-drag-edge

4

And that is my experience:
DialogDrag
изображение

5

And here is mine.
edge

Same version

image
image714×226 14.9 KB

Not sure why it may not work for you. Can you try in other browsers?

6

It works on FF and Chrome... Also if I enlarge (resize) the dialog just a bit, then dragging starts to work as expected on Edge.

7

Hi,
That issue with dialog dragging still persists and is really annoying. I'm testing on 3 different browsers on 3 different PCs and can't find consistent behavior. In most cases the dialog moves only horizontally. In some case (on Chrome or Edge) it starts to move as expected but after few seconds of constant dragging, releasing and then dragging again, the dialog sticks to the cursor and continues to move after releasing the mouse button.
The dialog start to move on any direction if prior dragging it is resized a bit, but that sticking to the cursor, described above still happens.
Can you please test for such behavior where the dialog sticks to the mouse pointer?

8

Hi all,

I can confirm @Joro 's report.

The vertical drag functionalities only starts work when a vertical resize of the dialog occurs.
And also, if a text selection is happening under the cursor (inside the dialog itself) when you try to drag, the drag event remains "sticked" and only way to resolve is push "exit" on keyboard.

Also tryed on three different browsers (chrome, edge, firefox) updated to the last available version on a updated windows 10.

Have you any suggestion/workaround to apply?

Thanks in advance

EDIT: if the console is open (F12) when the dialog is displayed, dragging works correctly immediately

9

Unfortunately we are still unable to reproduce such issue on any of our machines using up to date Edge.
Edge

You can attach the source code of Radzen.Blazor to your project to debug your case. If you think there is a bug and you have a fix you can submit pull request - we will review it and if it doesn't brake anything it will be merged.

10