Clicking on different DialogTriggers consecutively adds a new FluentProvider div to the DOM #31356
-
|
I implemented a component that that is essentially a wrapper to any button. This component contains a Dialog in which the wrapped button becomes the DialogTrigger to a DialogSurface. I have a grid of tiles that is each using the wrapper component, and it is opening up the DialogSurface fine. However, when I inspect the DOM, I see that it is adding a new div every time the dialog is opened. How can I prevent this from happening? |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
|
TLDR; You cannot 😅 Hey there @adrianpzamora. That extra node is a portal where the dialog will be rendered. that is a common strategy for surface elements, like popovers/dialog/menu and etc,. adding it to a different order in the DOM, right after the whole content makes rendering it above content easier (not many layouting recalc fights), it also makes keyboard navigation and tab indexing less nuanced, as it's the last element on the page. The same happens for our Popover, Menu, Dropdown, Combobox and Tooltip components. Here's the line code that declares the Portal on the DialogSurface: |
Beta Was this translation helpful? Give feedback.
TLDR; You cannot 😅
Hey there @adrianpzamora. That extra node is a portal where the dialog will be rendered. that is a common strategy for surface elements, like popovers/dialog/menu and etc,. adding it to a different order in the DOM, right after the whole content makes rendering it above content easier (not many layouting recalc fights), it also makes keyboard navigation and tab indexing less nuanced, as it's the last element on the page. The same happens for our Popover, Menu, Dropdown, Combobox and Tooltip components.
Here's the line code that declares the Portal on the DialogSurface:
fluentui/packages/react-components/react-dialog/src/components/DialogSurface/renderDialogSurface.tsx