Nested Components Triggering Floating Elements Unexpectedly

[totorofly]

Describe the bug
This is not a bug, but I don't know how to solve it.I am working on a feature with nested components that support recursive embedding. The component hierarchy consists of three layers (Parent Component A -> Child Component B -> Grandchild Component C). When the mouse moves over a component, the corresponding floating element should appear on its left side.

To Reproduce

Steps to reproduce the behavior:

• When the mouse moves over Parent Component A, only A's left side should have a floating element. This works as expected.

• When moving over Child Component B, only B's left side should have a floating element. However, floating elements appear on both A and B.

• Similarly, when moving over Grandchild Component C, floating elements appear on all three components (A, B, and C).

Expected behavior

• Moving over Parent Component A should only trigger A's floating element.
• Moving over Child Component B should only trigger B's floating element.
• Moving over Grandchild Component C should only trigger C's floating element.

Screenshots
If applicable, add screenshots to help explain your problem.

Context:

const [isSideButtonOpen, setIsSideButtonOpen] = useState(false);
 const {
   refs: refsSideButton,
   floatingStyles: floatingStylesSideButton,
   context: contextOuter,
 } = useFloating({
   open: isSideButtonOpen,
   onOpenChange: setIsSideButtonOpen,
   placement: "left-start",
   middleware: [offset(10)],
 });

 const [isNeedSideBarOpen, setIsNeedSideBarOpen] = useState(false);
 const hoverSideButton = useHover(contextOuter, {
   enabled: isNeedSideBarOpen,
   delay: 0,
   handleClose: safePolygon({
     blockPointerEvents: true,
   }),
 });
 const {
   getReferenceProps: getReferencePropsSideButton,
   getFloatingProps: getFloatingPropsSideButton,
 } = useInteractions([hoverSideButton]);

<NodeViewWrapper
  as={wrapperTag}
  id="nodeviewwrapper"
  className={wrapperClassName}
  ref={refsSideButton.setReference}
  {...getReferencePropsSideButton({
    onPointerEnter: (e) => {
      e.stopPropagation();
    },
  })}
  style={{ border: "1px solid blue", position: "relative" }}
>

Additional context
Attempts to Solve the Problem:
I tried to use e.stopPropagation(); within the onPointerEnter event handler to prevent the event from bubbling up to the parent components, but this did not have the desired effect.

I'm looking for guidance on how to prevent the floating elements from appearing on unintended parent components. Any assistance with understanding and correcting this behavior would be appreciated.

[atomiks]

You can use FloatingTree or context to close parents once a child has been entered. I'm assuming you can also prevent parents from ever opening by using a hover delay and communicating to parents that they are blocked from opening as well.

[totorofly]

Thank you for your answer. After carefully referring to the official documentation at https://floating-ui.com/docs/react#external-elements regarding external elements, I found that separating the floating element as an independent child component eliminates the issue.

[totorofly]

Unlike mouseover, the mouseenter event does not bubble. This means that if the event occurs on a child element, the mouseenter event handler on the parent element will not be triggered. On the other hand, the mouseover event will bubble from the innermost child element to the outermost parent element. To achieve the effect I want, I switched from using mouseover to mouseenter. Additionally, I have another nested child element inside the element I'm interested in. I set its pointer-events to none so that the mouseenter event would 'pass through' to the layer of the element that I want to detect. This way, I can achieve the desired effect.