Nested portals should be discoverable

This is more about a bridge between actual DOM Tree and React Tree.

Do you want to request a feature or report a bug? feature

What is the current behavior? You can portal a part of your rendering tree to another place in Dom Tree, and React would handle events, including events on Capture Phase like there were no portals - events could dive through all the react parents, and bubble up through all the react parents.

This is quite useful, as long as portal is an implementation detail, but useful only for normal events; there are more cases around it.

What is the expected behavior?

It’s better to explain it by example

• you have a Modal Dialog and it uses a Focus Lock, ie focus could not leave it.
• inside Modal you have a Custom Select, with Dropdown menu rendered via a portal.
• you could not use it, as long as from DOM prospective ModalNode.contains(DropDownNode) is always false, and Focus Lock will prevent focusing.

It’s a real issue - https://github.com/reach/reach-ui/issues/83, https://github.com/theKashey/react-focus-lock/issues/19.

Proposed solution:

• containsNode(domNode):boolean - React-aware version of DOM API node.contains(anotherNode).
• getHostNodes():Nodes[] - returns a list of all root nodes inside “current component” including direct children and portals. Similar to ReactDom.findDomNode, and (proposed)refs attached to React.Fragment. It just finds all nodes “you are consists of”. As a result you will be able to tab from one piece of you to another, making focus management independed of implementation details.

Cons:

• requires Component to access fiber, DOM node to access fiber thought node, or an new hook to do it in a functional way.
• does twice dreadfull things than deprecated findDomNode
• usage scope is very narrow.

Pros:

• my use case requires momentum access to a rendered tree, and does not suffer async stuff as findDomNode, where underlaying node might not be yet created. Stuff like “does something containsNode right now”, or “getHostNodes I consist from right now” are sync, and the question asked about actual DOM tree structure.

Example using react-dom-reflection, which implements required API - https://codesandbox.io/s/1or60v506l

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

Never worked

[diegohaz]

Bump

[theKashey]

I also ended up managing portals from the user space via ContextApi/subscriptions, but while such solution works perfectly - it works perfectly only for me and cannot be shared with some third-party library as it is “not standard”.