Dialog doesn't prevent user from Tabbing out of the dialog. Giving access to the component in background

[marc antoine pelletier]

Hi !

maybe i'm using it wrong or it has a problem but when I focus on an item on the dialog, and using Tab key to switch element's focus.

the focus can be moved to background windows. (behind the dialog control)

also I've found that I might be possible to activate some component and change their values. (when the Dialog is still open)

doing so may occurs in refresh of the page or navigation and other behavior that might prevent the user to complete his task in the dialog.

is it the intended behavior of the Modal dialog usage ?

I don't think it's normal.

thank you

Attachment: backdrop_controls_2d193844.zip

[Ashokkumar Balasubramanian]

Hi marc antoine pelletier, 

 

Greetings from Syncfusion support. 

 

We have checked your shared screenshot. But we were unable to reproduce your reported issue. As per modal behavior, doesn’t allow to access background application when dialog is open. If you wish to access parent application when dialog is open state, you can use modeless dialog for this requirement. 

  

You can prevent the dialog and complete the dialog works before navigating or refresh the page. 

  

We shared the same sample that we prepared at our end for your comfort. Please find the link below. 

  

Sample: https://stackblitz.com/edit/ev6tjk-cbppxx?file=index.ts 

  

In above sample, we have covered the below things, 

 

a.     Rendered the Grid component inside the Dialog component. 

b.     You can invoke the second dialog from first dialog’s when you click the footer ‘Next’ button or else click the grid row editing Button. 

  

If still face issues, please replicate your problem in the above sample and return it to us or else please share your code for replicate your issue. 

 

Regards, 

Ashokkumar B. 

[marc antoine pelletier]

Hello !

First I wanted to make sure that my idea is NOT to give access to the user the background of any dialog.

I want the normal behavior of a Modal window.

I've managed to replicate my issue with your snippet as well.

- simply open both dialog     

- once the Second dialog is shown

- click on the right side of the second dialog, inside back drop 

- press Tab once, or as many time it requires to obtains focus on the First dialog X button on the corner

- press space bar to emulate a click

- notice that the first dialog is killed and you remains only with the second one.

....

- you can even focus again in the backdrop after its closed and focus on the Open button,

- press space bar and obtain the First dialog on top of the Second one.

as for the navigation event I was simply giving it as an example. 
i'm not really facing this issue.

Regards,

marc

[Prince Oliver]

Hello Marc, 

Thank you for your update. 

We could replicate the reported issue in our end. We have confirmed this as a defect in our end. The fix for the issue will be included in our upcoming Volume 2 main release which is expected in the month of July 2019. You can track the status of the issue through the following feedback portal link: 

https://www.syncfusion.com/feedback/7153/ 

Until then, you can use below sample level solution to  focus the current dialog element when clicking the Dialog overlay using overlayClick event. Please find the below code  

[Index.ts] 

let dialogObj: Dialog = new Dialog({ 

    overlayClick: overlayClick, 

    isModal: true, 

}); 

 

function overlayClick(e) { // Triggered when you click the Dialog overlay 

    this.element.focus() // Focus the current Dialog component 

} 

Sample link: https://stackblitz.com/edit/ev6tjk-4mk1pg

 

Regards, 

Prince 

[Prince Oliver]

Hello Marc, 

We are glad to announce that our Essential Studio Volume 2, 2019 release (v17.2.0.34) is rolled out and is available for download under the following link. 

 

https://www.syncfusion.com/forums/145843/essential-studio-2019-volume-2-release-v17-2-0-34-is-available-for-download 

 

We have fixed the reported issue in our end. We suggest you upgrade to the latest version in your end. We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 

 

Regards, 

Prince