Inputfields don't work inside of a nested dialog #1984
-
|
Hello everyone, I want to put a EditForm inside a Dialog which is opened from another Dialog. I noticed that you can not type into a textfield. I tried it with other input components but nothing seems to work. |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 3 replies
-
|
That is probably because a Dialog uses an Overlay to shield off the background. If you have two, they will overlap. We have not claimed (nor tested) nesting dialogs to work... |
Beta Was this translation helpful? Give feedback.
-
|
Hi I tried it again in hope of finding a workaround, but I just noticed that there is an error in the web-components.js file. 
|
Beta Was this translation helpful? Give feedback.
-
|
Thank you for your reply. Are nested Dialog going to work in the future or is it not planned? |
Beta Was this translation helpful? Give feedback.
-
|
In FluentUI, the use of nested dialogs is generally discouraged. According to the FluentUI documentation, selecting an action in a dialog should move users forward in their workflow. Having multiple dialogs can distract from the original context and make it difficult for users, especially those with cognitive disabilities or who use magnified views, to interact with the content. For best usability and to ensure accessibility, it’s recommended to avoid nesting dialogs. Instead, dialogs should help people take action by keeping options simple and focused on the main goal. If you need to present additional content or actions, consider using alternative UI elements that complement the workflow without the need for multiple overlapping dialogs. We don't forbid their use, but we haven't had time to validate everything. |
Beta Was this translation helpful? Give feedback.
-
|
Ok, I understand. Thank you for your response. |
Beta Was this translation helpful? Give feedback.
-
|
Set the TrapFocus parameter to false |
Beta Was this translation helpful? Give feedback.
In FluentUI, the use of nested dialogs is generally discouraged. According to the FluentUI documentation, selecting an action in a dialog should move users forward in their workflow. Having multiple dialogs can distract from the original context and make it difficult for users, especially those with cognitive disabilities or who use magnified views, to interact with the content.
For best usability and to ensure accessibility, it’s recommended to avoid nesting dialogs. Instead, dialogs should help people take action by keeping options simple and focused on the main goal. If you need to present additional content or actions, consider using alternative UI elements that complement the workflo…