Declined
Last Updated: 17 Jul 2021 10:29 by ADMIN
Matt
Created on: 12 Apr 2021 18:32
Category: UI for Blazor
Type: Feature Request
0
Window - System Modal vs Viewport Modal

I wasn't sure if I should report this as a bug or not. With a modal window, you can tab beyond the modal window into the URL, and then continue on into the page behind the modal window itself. I was able to recreate this on the Modal demo, and fire a search, even though I couldn't click to get there. As I saw in another post that it is essentially a viewport modal (https://feedback.telerik.com/blazor/1510450-prevent-the-user-from-dragging-a-window-out-of-the-viewport), would it be possible to force modal to be system modal, as was available back in the ancient Winforms days?

---

ADMIN EDIT

That's how a web page behaves. Code in a web page cannot and should not prevent the user from using their OS. The browser chrome (address bar, buttons and so on) are part of the OS, and as such are beyond the sandbox of the web app. The web app is limited to the viewport, it cannot go out of it, or interact or control elements outside of it. Anything else would be a severe security issue.

A system-wide modal dialog is only possible though a native application, but not in a web application.

---

6 comments
ADMIN
Marin Bratanov
Posted on: 17 Jul 2021 10:29

Hello (different) Matt,

Such behavior is commonly known as a "tab key trap" (of course, wording can vary a lot) and is something that we know we should implement, and is in our backlog, but it is not yet done.

I've made this page where you can click the Follow button to know when it gets implemented: https://feedback.telerik.com/blazor/1528232-modal-window-should-trap-the-tab-keys-so-you-cannot-focus-content-behind-the-window.

 

Regards,
Marin Bratanov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Matt
Posted on: 16 Jul 2021 05:13

Hi Martin

 

I'm having this problem too (I'm a different Matt btw). I agree that the modal shouldn't prevent tabbing into the browser controls. But the problem is, when using the modal, you can tab to controls and HTML elements behind the modal on the page. You shouldn't be able to interact with these in this way, and in fact mouse clicks are blocked.

This is an accessibility requirement - the behavior should work as expected for mouse users and keyboard users.

Is there something I'm missing here? As per the docs here I've set `Modal="true"` but can still tab behind it.

Appreciate any help!

 

Cheers

Matt

ADMIN
Marin Bratanov
Posted on: 12 Apr 2021 18:45

Hi Matt,

That particular gif is a behavior from the demos - there is explicit code there that calls .focus() on the search input. That happens after the app initializes in the browser. The modal window is rendered there before that - it renders on the server because we use the ServerPrerendered mode.

The modal window cannot prevent such application code behavior. If you do the same thing in your app (focusing stuff explicitly) you may want to check first whether a modal window is shown.

Regards,
Marin Bratanov
Progress Telerik

Тhe web is about to get a bit better! 

The Progress Hack-For-Good Challenge has started. Learn how to enter and make the web a worthier place: https://progress-worthyweb.devpost.com.

Matt
Posted on: 12 Apr 2021 18:42
We discussed that in here moments after I hit post. Seems weird, though, that it wouldn't resume back inside the modal.
Matt
Posted on: 12 Apr 2021 18:40
Adding clip:
Attached Files:
ADMIN
Marin Bratanov
Posted on: 12 Apr 2021 18:38

Hello Matt,

That's how a web page behaves. Code in a web page cannot and should not prevent the user from using their OS. The browser chrome (address bar, buttons and so on) are part of the OS, and as such are beyond the sandbox of the web app. The web app is limited to the viewport, it cannot go out of it, or interact or control elements outside of it. Anything else would be a severe security issue.

A system-wide modal dialog is only possible though a native application, but not in a web application.

Regards,
Marin Bratanov
Progress Telerik

Тhe web is about to get a bit better! 

The Progress Hack-For-Good Challenge has started. Learn how to enter and make the web a worthier place: https://progress-worthyweb.devpost.com.