Radzen Dialog does not wrap tab order

Radzen.Blazor Components
1

I'm using the DialogService to open my dialogues but I've noticed that when the dialogue is open and I start tabbing between the fields it stops at the last element (and I have to use shift+tab to go backwards).
I would have assumed it would start over from the top inside the dialogue.

Is this by design? Is there a workaround that doesn't involve having to set tabindex on my fields?

2

Indeed this is by design however we accept pull requests!

1 Like
3

I'm not very good with javascript, so this solution might be a big no-no. But here is a workaround if anyone else is interested:

Radzen.focusTrapDialog = function(e) {
e = e || window.event;
var isTab = false;
if ("key" in e) {
isTab = (e.key === "Tab");
} else {
isTab = (e.keyCode === 9);
}
if (isTab) {
var focusable = Radzen.getFocusableDialogElements();
var firstFocusable = focusable[0];
var lastFocusable = focusable[focusable.length - 1];

    if (firstFocusable && e.shiftKey && document.activeElement === firstFocusable) {
        e.preventDefault();
        if (lastFocusable) {
            lastFocusable.focus();
        } else {
            firstFocusable.focus();
        }
    } else if (lastFocusable && !e.shiftKey && document.activeElement === lastFocusable) {
        e.preventDefault();
        if (firstFocusable) {
            firstFocusable.focus();
        } else {
            lastFocusable.focus();
        }
    }
}

}

I have my own .js with some utility functions where I override the Radzen.focusTrapDialog function. I added some if-else statements to handle tab wrap

4

You can submit pull request! We will verify your code and we will merge it if everything works correctly!