platform-bible-react
    Preparing search index...

    Variable PopoverPortalContainerProviderConst

    PopoverPortalContainerProvider: (
        __namedParameters: {
            children: ReactNode;
            container: null | HTMLElement;
        },
    ) => Element = PortalContainerProvider

    Keeps descendant PopoverContent inside container instead of document.body. Use it whenever a popover's trigger sits inside an ancestor that owns a focus trap or a dismiss-on-outside-click layer (DialogContent, DropdownMenuContent, …), which would otherwise pull focus out of the popover or treat a click inside it as an outside click.

    Contract:

    • Pass null for container until the ancestor element exists (the initial state of a ref-callback useState) to keep Radix's document.body default; once it exists, later opens portal into it.
    • The ancestor must wrap this provider, not the other way round, so only its own descendants are redirected.
    • Only affects popovers mounted as React descendants; already-open popovers are not re-portalled.

    TooltipPortalContainerProvider in tooltip.tsx does the same for tooltips.

    Type declaration

      • (
            __namedParameters: {
                children: ReactNode;
                container: null | HTMLElement;
            },
        ): Element

      • Parameters

        • __namedParameters: { children: ReactNode; container: null | HTMLElement }

        Returns Element

    const [dialogEl, setDialogEl] = useState<HTMLDivElement | null>(null);

    <Dialog open={isOpen} onOpenChange={setIsOpen}>
      <DialogContent ref={setDialogEl}>
        <PopoverPortalContainerProvider container={dialogEl}>
          <BookChapterControl ... />
        </PopoverPortalContainerProvider>
      </DialogContent>
    </Dialog>;

    Settings

    Member Visibility