CODEWITHSUNDEEP
c#blazordevexpressxafradzen
Daxtear
Daxtear

Reputation: 11

Radzen Html Editor in DevExpress XAF Blazor: Right click passes through element

I have a DevExpress XAF Blazor project in which I integrated the HTML Text Editor component by Radzen. It generally works fine, but when I right click into the text field it doesn't open the context menu of the text field, it opens the "Customize Layout" context menu of XAF Blazor.

If I use a textarea element for example, both by DevExpress and just built-in HTML stuff works just fine as you would expect. You right click into the element and it displays a relevant context menu. Now, when I globally disable the Layout Customization, it does actually work as expected. This makes it seem like the RadzenHTMLEditor component somehow gives up its right to display a right click menu when DevExpress wants to show one. Changing the z-index doesn't change anything either. I could build a custom context menu which would override the priority of the Layout Customization menu, but I would like to avoid that.

Edit: The same also happens with a div that has contenteditable=true, as is used within the Radzen HTML Editor.

Upvotes: 1

Views: 104

Answers (1)

Daxtear
Daxtear

Reputation: 11

In case anyone else ever has this problem, here is the solution I found. First, you need to get a Reference to the contenteditable div from the HtmlEditor and then call a javascript function with that given as the parameter. I did this in the OnAfterRender event.

if(firstRender) {
    ElementReference er = ReflectionHelper.GetPrivateProperty<ElementReference>(HtmlEditor, "ContentEditable");
    JSRuntime.InvokeVoidAsync("ContextMenuStopPropagation", er);
}

The ReflectionHelper.GetPrivateProperty function is a helper method to get the value of the private ContentEditable property from the Editor.

public static T GetPrivateProperty<T>(object obj, string propertyName) {
    return (T)obj.GetType()
              .GetProperty(propertyName, 
    BindingFlags.Instance | BindingFlags.NonPublic)
              .GetValue(obj);
}

Then in the javascript function, add an eventListener for "contextmenu" to the element in which you call stopPropagation.

window.ContextMenuStopPropagation = (element) => {
    element.addEventListener('contextmenu', function (e) {
        e.stopPropagation();
        return false;
    }, false);
}

Upvotes: 0

Related Questions