Description
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 - reach/reach-ui#83, theKashey/react-focus-lock#19.
Proposed solution:
containsNode(domNode):boolean- React-aware version of DOM APInode.contains(anotherNode).getHostNodes():Nodes[]- returns a list of all root nodes inside "current component" including direct children and portals. Similar toReactDom.findDomNode, and (proposed)refs attached to React.Fragment. It just finds all nodes "you are consists of". As a result you will be able totabfrom onepieceof 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
hookto 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 somethingcontainsNoderight now", or "getHostNodesI 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