fluentui
fluentui copied to clipboard
microsoft
Layer component: open up for prop HostNode (HostId is limited and only looking in document object light-dom
Describe the feature that you would like added
Currently trying to use Dialog component. It uses Modal and then Layer under the hood. The default behaviour is to append content at the bottom of the document (body) if nothing else is given. Trying to use HostId prop, Layer Base is only looking for that id within the document, excluding shadow-dom. It would be nice to see an option for appending the Layer in a more flexible manner. Either by providing a hostNode or crawling shadow-dom, or adding options like it is done for Callout with doNotLayer: true.
What component or utility would this be added to
Layer within getHost function plus adding one prop or extending HostId to accept a Node Dialog/Modal for sending that prop all the way to Layer
Have you discussed this feature with our team, and if so, who
No
Additional context/screenshots
It is about this piece of code:
// Returns the user provided hostId props element, the default target selector, // or undefined if document doesn't exist. var getHost = function () { if (!doc) { return undefined; } if (hostId) { // HERE: return doc.getElementById(hostId); } else { var defaultHostSelector = getDefaultTarget(); return defaultHostSelector ? doc.querySelector(defaultHostSelector) : doc.body; } };
@mlp73 Can you provide a live example showing this scenario, and where you'd like the Layer to be attached? You can start from https://aka.ms/fluentpen (or https://aka.ms/fluentsandbox for codesandbox) or "Export to CodePen" on one of the component examples.
Also I'm not an expert with Layer but from looking at the current code, it appears that Layers are designed to be rendered only within a LayerHost, not attached to some arbitrary node. Would the node you're describing be a LayerHost?
@ecraig12345 Sure. I attempted to reproduce/illustrate the scenario here: https://codesandbox.io/s/fluentui-layer-r686k It does not really matter where exactly the Layer is attached as long as it is in the correct Dom. I tried to add comments along the code in the codesandbox to explain more of the context.
When it comes to the Layer from a conceptual point of view I am not an expert either. My intention was to make that Node be a LayerHost yes.
Is there any other preferable way to do so? Or any other way to append the Layer in the Dom the Component actually belongs to?
Just checkin in, did you get the chance to look at this issue and the supplied example?
Because this issue has not had activity for over 180 days, we're automatically closing it for house-keeping purposes.
Still require assistance? Please, create a new issue with up-to date details.