Target for Popup

[dcorbin]

I am having trouble getting the target "right" in one particular case with react-tiny-popover. I have used it in 4 other locations within this app, but each of those apps. the child-element of the popover was a literal HTML element, and it seemed to just work.

In this location, I have 4 usages of each of which passes different children. All of the children are themselves React components, which ultimately resolve down to an HTML

, with knowledge of where to position relative to their div-parent.

Looking at the documentation, it seems to me like I need to use forwardRef on a div wrapping the children, but introducing that div creates layout problems for me, as the components know their layout already.

Do I have the basics correct? Is there another way to do this?

[alexkatz]

In general, use of forwardRef should be transparent -- i.e., the mere presence of a forwarded ref should not affect your layout in any way at all. If you're adding an extra div, that's likely your issue.

Can you provide a code snippet of what you mean?

[dcorbin]

I'm only adding an extra dive because it seemed like it was required. I'm sure the extra div is the source of my layout problems, I'm just not sure how I could do it without it.

function HintsPopover(
  props: PropsWithChildren<{
    hints: ITurn<IHintAction>[];
    open: boolean;
    large?: boolean;
    closePopover: () => void;
  }>
) {
  interface NullProps extends React.ComponentPropsWithoutRef<"div"> {
    nop?: string;
  }
  const TriggerComponent = forwardRef<HTMLDivElement, NullProps>((props, ref) => (
    <div ref={ref} className="bg-red">
      {props.children}
    </div>
  ));
  return (
    <Popover
      containerClassName="z-999"
      content={({ position, childRect, popoverRect }) => {
        return (
          <ArrowContainer
            arrowColor={POPOVER_ARROW_COLOR} // determined from .b--yellow
            arrowSize={10}
            arrowStyle={{ opacity: 1 }}
            childRect={childRect}
            popoverRect={popoverRect}
            position={position}
          >
            <ReceivedHintsView hints={props.hints} style={POPOVER_CONTENT_STYLE} />
          </ArrowContainer>
        );
      }}
      isOpen={props.open}
      positions={"top"}
      onClickOutside={props.closePopover}
    >
     /* {props.children} */
      <TriggerComponent />
    </Popover>
  );
}` ``

The commented out line near `<TriggerComponent/>` is what was there before react-tiny-popover.

The invocation is like this:```typescript
   <HintsPopover closePopover={() => props.onActivationChange(false)} hints={hints} open={props.allHintsOpen}>
      <CornerMark onActivationChange={props.onActivationChange} />
    </HintsPopover>

Not that I think it matters much, but I'm migrating from react-popover because it has problems with recent reacts and appears dead.

[dcorbin]

I tried this too:

  // eslint-disable-next-line react/display-name
  const CornerMarkRef = forwardRef<HTMLDivElement, CornerMarkProps>((props, ref) => {
    return <CornerMark ref={ref} onActivationChange={props.onActivationChange} />;
  });
  return (
    <HintsPopover closePopover={() => props.onActivationChange(false)} hints={hints} open={props.allHintsOpen}>
      <CornerMarkRef onActivationChange={props.onActivationChange} />
    </HintsPopover>
  );

interface CornerMarkProps {
  onActivationChange: (b: boolean) => void;
  ref?: LegacyRef<HTMLDivElement>;
}
export function CornerMark(props: CornerMarkProps) {
  return (
    <div
      ref={props.ref}
      className={"absolute right-0 br--left top-0 br--bottom br-100 bg-hints"}
      style={{ width: "20%", height: "20%" }}
      onMouseEnter={() => {
        props.onActivationChange(true);
      }}
      onMouseLeave={() => props.onActivationChange(false)}
    />
  );
}

But no joy. It shows the popup, but it's top-left corner of the browser and no arrow.

[alexkatz]

Let me know if this helps:

https://codesandbox.io/p/devbox/223wzc?file=%2Fsrc%2FApp.tsx%3A1%2C20

[dcorbin]

Devbox not found

It's likely that Devbox you're trying to access does not exist or you don't have the required permissions to access it.

[alexkatz]

Apologies, wasn't set to public -- try again now.

[dcorbin]

Yes, that seems to work. Thank you.

To summarize for anyone in the future:

1. change how the passed child mark is define to use forwardRef, rather than as a traditional functional component. (CornerMark above)
2. explicitly define children: JSX.Element in the props for the Popover wrapping component (HintsPopover above).

[dcorbin]

Well, that worked for two my four cases, but two of them introduce another layer. That additional layer still seems to be a problem:
I thought that passing the ref as a property down another layer to where the div actually is would solve it, but it does not.

https://codesandbox.io/p/devbox/223wzc

[dcorbin]

Solved. I changed the name of the property I added from ref to divRef, and it magically gets better. Something (eslint?) should complain when define property 'ref' if it's not going to work.

Thanks again.

[alexkatz]

Keep in mind that in React 18 and below, forwardRef is the proper way of passing refs down through custom components (beginning with React 19, ‘ref’ can be treated like a normal prop).

You can and should use an additional forwardRef rather than anything like a ‘divRef’ prop.

You can pass a single ref through multiple components by using forwardRef multiple times. The official docs address topic this here.

I can provide another more specific example next week when I’m able.

[dcorbin]

I am on React 18. I have adjusted accordingly. I think I was confused in part by the name "forwardRef". I took it declaratively: this is forward reference for something to come, rather than a directive "forward a ref to this component".